Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[OUDS] feat: Add 'Borders' token, utilities and documentation #2687

Merged
merged 44 commits into from
Sep 18, 2024
Merged

[OUDS] feat: Add 'Borders' token, utilities and documentation #2687

Show file tree
Hide file tree
Changes from 30 commits
Commits
Show all changes
44 commits
Select commit Hold shift + click to select a range
8006ba8
feat: Add raw and semantic tokens for borders
vprothais Aug 8, 2024
2fd9b19
feat: Add scss-docs-start for variables and maps
vprothais Aug 8, 2024
5e9c085
feat: Add border documentation
vprothais Aug 8, 2024
19ee8ec
feat: Plug Bootstrap variables to design tokens
vprothais Aug 9, 2024
8cc0c90
feat: Add rounded top, end, bottom, start helpers with semantic name
vprothais Aug 9, 2024
8155c82
Fix CI
louismaximepiton Aug 13, 2024
734af1c
.
louismaximepiton Aug 13, 2024
67d4b9f
.
louismaximepiton Aug 14, 2024
aa4637f
Revert changes
louismaximepiton Aug 14, 2024
ea29ef7
1rst final version
louismaximepiton Aug 21, 2024
993116a
fix CI
louismaximepiton Aug 22, 2024
de8f6b7
.
louismaximepiton Aug 22, 2024
cee5a0c
Add `$enable-rounded`
louismaximepiton Aug 23, 2024
b00023f
Revert
louismaximepiton Aug 23, 2024
0c094b8
Revert unwanted changes
louismaximepiton Aug 26, 2024
8863f4e
fix(reviews)
louismaximepiton Sep 4, 2024
0d65d1e
fix(CI)
louismaximepiton Sep 4, 2024
d3d94a6
fix(CI)
louismaximepiton Sep 4, 2024
1a8b935
doc: removed `border-default` from migration guides
vprothais Sep 11, 2024
db8afc0
chore: removed scss test files from .stylelintignore
vprothais Sep 11, 2024
341f56a
Merge branch 'ouds/main' of github.com:Orange-OpenSource/Orange-Boost…
vprothais Sep 11, 2024
e43fad3
doc: moved Border utilities migration documentation to v0.0.4
vprothais Sep 11, 2024
3cbf492
fix: fixed the rounded-2 value and compatibility values increase
vprothais Sep 12, 2024
d40dd34
feat: update pill value to match design token value
vprothais Sep 12, 2024
2730323
Merge branch 'ouds/main' into ouds/main-vp-border-token
julien-deramond Sep 16, 2024
26df9ab
style: Add comment on variables modified by OUDS
vprothais Sep 16, 2024
2e57af0
doc: Applied code review proposals
vprothais Sep 16, 2024
450e3f0
Drop comment in borders.md
julien-deramond Sep 17, 2024
176b7fb
Change borders semantic tokens sentence
julien-deramond Sep 17, 2024
90c740f
Fix typos in 'OUDS mod' comments
julien-deramond Sep 17, 2024
6e2aa01
Reorder alphabetically raw/semantic Sass vars + rename `scss-docs-sta…
julien-deramond Sep 17, 2024
5bc98a8
.
julien-deramond Sep 17, 2024
3cee8ff
Formatting of Sass files
julien-deramond Sep 18, 2024
d423f54
Fix Sass unit tests
julien-deramond Sep 18, 2024
2de2149
Fix Sass unit tests
julien-deramond Sep 18, 2024
35ae87c
Drop some comments in Markdown to ease the future integration
julien-deramond Sep 18, 2024
265a2d2
Add rounded classes to unit tests
julien-deramond Sep 18, 2024
189e500
Refine some wording in migration guides
julien-deramond Sep 18, 2024
4b1056a
Refine migration guides
julien-deramond Sep 18, 2024
d937ecc
.
julien-deramond Sep 18, 2024
b1b6ac3
.
julien-deramond Sep 18, 2024
3ce4c75
.
julien-deramond Sep 18, 2024
d0d55c4
Try some other values for bundlewatch
julien-deramond Sep 18, 2024
a80afa1
Try some other values for bundlewatch
julien-deramond Sep 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions .bundlewatch.config.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@
"files": [
{
"path": "./dist/css/ouds-web-bootstrap.css",
"maxSize": "44.75 kB"
"maxSize": "45.0 kB"
},
{
"path": "./dist/css/ouds-web-bootstrap.min.css",
"maxSize": "41.5 kB"
"maxSize": "42.0 kB"
},
{
"path": "./dist/css/ouds-web-grid.css",
Expand Down
20 changes: 12 additions & 8 deletions scss/_root.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,20 +114,24 @@
--#{$prefix}disabled-color: #{$disabled-color}; // OUDS mod
--#{$prefix}tertiary-active-bg: #{$tertiary-active-bg}; // OUDS mod

// scss-docs-start root-border-var
// scss-docs-start root-border-var-ouds
--#{$prefix}border-width: #{$border-width};
--#{$prefix}border-style: #{$border-style};
--#{$prefix}border-color: #{$border-color};
--#{$prefix}border-color-subtle: #{$border-color-subtle}; // OUDS mod
--#{$prefix}border-color-translucent: #{$border-color-translucent};
// scss-docs-end root-border-var-ouds

--#{$prefix}border-radius: #{$border-radius};
--#{$prefix}border-radius-sm: #{$border-radius-sm};
--#{$prefix}border-radius-lg: #{$border-radius-lg};
--#{$prefix}border-radius-xl: #{$border-radius-xl};
--#{$prefix}border-radius-xxl: #{$border-radius-xxl};
--#{$prefix}border-radius-2xl: var(--#{$prefix}border-radius-xxl); // Deprecated in Bootstrap v5.3.0 for consistency
--#{$prefix}border-radius-pill: #{$border-radius-pill};
// scss-docs-start root-border-var
@if $enable-bootstrap-compatibility {
Copy link
Member

@julien-deramond julien-deramond Sep 16, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's let that like this for now, but this is not final, as a lot of Sass component variables depend on var(--bs-border-radius).
For instance, the header is a bit broken (active state of menu items) in our docs.

--#{$prefix}border-radius: #{$border-radius};
--#{$prefix}border-radius-sm: #{$border-radius-sm};
--#{$prefix}border-radius-lg: #{$border-radius-lg};
--#{$prefix}border-radius-xl: #{$border-radius-xl};
--#{$prefix}border-radius-xxl: #{$border-radius-xxl};
--#{$prefix}border-radius-2xl: var(--#{$prefix}border-radius-xxl); // Deprecated in Bootstrap v5.3.0 for consistency
--#{$prefix}border-radius-pill: #{$border-radius-pill};
}
// scss-docs-end root-border-var

--#{$prefix}box-shadow: #{$box-shadow};
Expand Down
190 changes: 138 additions & 52 deletions scss/_utilities.scss
View file
Open in desktop
julien-deramond marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
Expand Up @@ -132,43 +132,59 @@ $utilities: map-merge(
)
),
// scss-docs-end utils-position
// OUDS mod: border utilities
// scss-docs-start utils-border-ouds
"border-ouds": (
property: border,
values: (
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
"none": 0,
),
),
// scss-docs-end utils-border-ouds
// End mod
// scss-docs-start utils-borders
"border": (
property: border,
values: (
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
// OUDS mod: null value moved to border-ouds
0: 0,
)
),
bootstrap-compatibility: true
),
"border-top": (
property: border-top,
values: (
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
// OUDS mod: null value moved to border-top-ouds
0: 0,
)
),
bootstrap-compatibility: true
),
"border-end": (
property: border-right,
class: border-end,
values: (
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
// OUDS mod: null value moved to border-end-ouds
0: 0,
)
),
bootstrap-compatibility: true
),
"border-bottom": (
property: border-bottom,
values: (
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
// OUDS mod: null value moved to border-bottom-ouds
0: 0,
)
),
bootstrap-compatibility: true
),
"border-start": (
property: border-left,
class: border-start,
values: (
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
// OUDS mod: null value moved to border-start-ouds
0: 0,
)
),
bootstrap-compatibility: true
),
"border-color": (
property: border-color,
Expand All @@ -186,7 +202,8 @@ $utilities: map-merge(
"border-width": (
property: border-width,
class: border,
values: $border-widths
values: $border-widths,
bootstrap-compatibility: true
),
"border-opacity": (
css-var: true,
Expand All @@ -197,9 +214,54 @@ $utilities: map-merge(
50: .5,
75: .75,
100: 1
)
),
bootstrap-compatibility: true
),
// scss-docs-end utils-borders
// OUDS mod: border utilities
// scss-docs-start utils-borders-ouds
"border-top-ouds": (
property: border-top,
values: (
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
"none": 0,
),
),
"border-end-ouds": (
property: border-right,
class: border-end,
values: (
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
"none": 0,
),
),
"border-bottom-ouds": (
property: border-bottom,
values: (
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
"none": 0,
),
),
"border-start-ouds": (
property: border-left,
class: border-start,
values: (
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
"none": 0,
),
),
"border-width-ouds": (
property: border-width,
class: border,
values: $ouds-border-widths
),
"border-style-ouds": (
property: border-style,
class: border,
values: $ouds-border-styles
),
// scss-docs-end utils-borders-ouds
// End mod
// Sizing utilities
// scss-docs-start utils-sizing
"width": (
Expand Down Expand Up @@ -729,78 +791,102 @@ $utilities: map-merge(
property: border-radius,
class: rounded,
values: (
null: var(--#{$prefix}border-radius),
// OUDS mod: null value moved to rounded-ouds
0: 0,
1: var(--#{$prefix}border-radius-sm),
2: var(--#{$prefix}border-radius),
3: var(--#{$prefix}border-radius-lg),
4: var(--#{$prefix}border-radius-xl),
5: var(--#{$prefix}border-radius-xxl),
circle: 50%,
pill: var(--#{$prefix}border-radius-pill)
)
2: var(--#{$prefix}border-radius-lg), // OUDS mod: instead of var(--#{$prefix}border-radius)
3: var(--#{$prefix}border-radius-xl), // OUDS mod: instead of var(--#{$prefix}border-radius-lg)
4: var(--#{$prefix}border-radius-xxl), // OUDS mod: instead of var(--#{$prefix}border-radius-xl)
5: $border-radius-xxl * 1.5, // OUDS mod: instead of var(--#{$prefix}border-radius-xxl)
),
bootstrap-compatibility: true
),
"rounded-top": (
property: border-top-left-radius border-top-right-radius,
class: rounded-top,
values: (
null: var(--#{$prefix}border-radius),
// OUDS mod: null value moved to rounded-top-ouds
0: 0,
1: var(--#{$prefix}border-radius-sm),
2: var(--#{$prefix}border-radius),
3: var(--#{$prefix}border-radius-lg),
4: var(--#{$prefix}border-radius-xl),
5: var(--#{$prefix}border-radius-xxl),
circle: 50%,
pill: var(--#{$prefix}border-radius-pill)
)
2: var(--#{$prefix}border-radius-lg), // OUDS mod: instead of var(--#{$prefix}border-radius)
3: var(--#{$prefix}border-radius-xl), // OUDS mod: instead of var(--#{$prefix}border-radius-lg)
4: var(--#{$prefix}border-radius-xxl), // OUDS mod: instead of var(--#{$prefix}border-radius-xl)
5: $border-radius-xxl * 1.5, // OUDS mod: instead of var(--#{$prefix}border-radius-xxl)
),
bootstrap-compatibility: true
),
"rounded-end": (
property: border-top-right-radius border-bottom-right-radius,
class: rounded-end,
values: (
null: var(--#{$prefix}border-radius),
// OUDS mod: null value moved to rounded-end-ouds
0: 0,
1: var(--#{$prefix}border-radius-sm),
2: var(--#{$prefix}border-radius),
3: var(--#{$prefix}border-radius-lg),
4: var(--#{$prefix}border-radius-xl),
5: var(--#{$prefix}border-radius-xxl),
circle: 50%,
pill: var(--#{$prefix}border-radius-pill)
)
2: var(--#{$prefix}border-radius-lg), // OUDS mod: instead of var(--#{$prefix}border-radius)
3: var(--#{$prefix}border-radius-xl), // OUDS mod: instead of var(--#{$prefix}border-radius-lg)
4: var(--#{$prefix}border-radius-xxl), // OUDS mod: instead of var(--#{$prefix}border-radius-xl)
5: $border-radius-xxl * 1.5, // OUDS mod: instead of var(--#{$prefix}border-radius-xxl)
),
bootstrap-compatibility: true
),
"rounded-bottom": (
property: border-bottom-right-radius border-bottom-left-radius,
class: rounded-bottom,
values: (
null: var(--#{$prefix}border-radius),
// OUDS mod: null value moved to rounded-bottom-ouds
0: 0,
1: var(--#{$prefix}border-radius-sm),
2: var(--#{$prefix}border-radius),
3: var(--#{$prefix}border-radius-lg),
4: var(--#{$prefix}border-radius-xl),
5: var(--#{$prefix}border-radius-xxl),
circle: 50%,
pill: var(--#{$prefix}border-radius-pill)
)
2: var(--#{$prefix}border-radius-lg), // OUDS mod: instead of var(--#{$prefix}border-radius)
3: var(--#{$prefix}border-radius-xl), // OUDS mod: instead of var(--#{$prefix}border-radius-lg)
4: var(--#{$prefix}border-radius-xxl), // OUDS mod: instead of var(--#{$prefix}border-radius-xl)
5: $border-radius-xxl * 1.5, // OUDS mod: instead of var(--#{$prefix}border-radius-xxl)
),
bootstrap-compatibility: true
),
"rounded-start": (
property: border-bottom-left-radius border-top-left-radius,
class: rounded-start,
values: (
null: var(--#{$prefix}border-radius),
// OUDS mod: null value moved to rounded-start-ouds
0: 0,
1: var(--#{$prefix}border-radius-sm),
2: var(--#{$prefix}border-radius),
3: var(--#{$prefix}border-radius-lg),
4: var(--#{$prefix}border-radius-xl),
5: var(--#{$prefix}border-radius-xxl),
circle: 50%,
pill: var(--#{$prefix}border-radius-pill)
)
2: var(--#{$prefix}border-radius-lg), // OUDS mod: instead of var(--#{$prefix}border-radius)
3: var(--#{$prefix}border-radius-xl), // OUDS mod: instead of var(--#{$prefix}border-radius-lg)
4: var(--#{$prefix}border-radius-xxl), // OUDS mod: instead of var(--#{$prefix}border-radius-xl)
5: $border-radius-xxl * 1.5, // OUDS mod: instead of var(--#{$prefix}border-radius-xxl)
),
bootstrap-compatibility: true
),
// scss-docs-end utils-border-radius
// OUDS mod: rounded utilities for border-radius
// scss-docs-start utils-border-radius-ouds
"rounded-ouds": (
property: border-radius,
class: rounded,
values: $ouds-border-radiuses
),
"rounded-top-ouds": (
property: border-top-left-radius border-top-right-radius,
class: rounded-top,
values: $ouds-border-radiuses
),
"rounded-end-ouds": (
property: border-top-right-radius border-bottom-right-radius,
class: rounded-end,
values: $ouds-border-radiuses
),
"rounded-bottom-ouds": (
property: border-bottom-right-radius border-bottom-left-radius,
class: rounded-bottom,
values: $ouds-border-radiuses
),
"rounded-start-ouds": (
property: border-bottom-left-radius border-top-left-radius,
class: rounded-start,
values: $ouds-border-radiuses
),
// scss-docs-end utils-border-radius-ouds
// End mod
// scss-docs-start utils-visibility
"visibility": (
property: visibility,
Expand Down
26 changes: 13 additions & 13 deletions scss/_variables.scss
View file
Open in desktop
julien-deramond marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
Expand Up @@ -611,27 +611,27 @@ $container-padding-x: $grid-gutter-width !default;
// Define common padding and border radius sizes and more.

// scss-docs-start border-variables
$border-width: .125rem !default;
$border-width: $ouds-border-width-default !default; // OUDS mod: instead of .125rem
$border-widths: (
1: $border-width * .5,
2: $border-width,
3: $border-width * 1.5,
4: $border-width * 2,
5: $border-width * 2.5
1: map-get($ouds-border-widths, "thin"), // OUDS mod: instead of $border-width * .5
2: map-get($ouds-border-widths, "thick"), // OUDS mod: instead of $border-width
3: map-get($ouds-border-widths, "thicker"), // OUDS mod: instead of $border-width * 1.5
4: map-get($ouds-border-widths, "thickest"), // OUDS mod: instead of $border-width * 2
5: map-get($ouds-border-widths, "thickest") * 1.25 // OUDS mod: instead of $border-width * 2.5
) !default;
$border-style: solid !default;
$border-style: $ouds-border-style-default !default; // OUDS mod: instead of solid
$border-color: $black !default; // OUDS mod: instead of `$gray-300`
$border-color-subtle: $gray-500 !default; // OUDS mod
$border-color-translucent: rgba($black, .175) !default;
// scss-docs-end border-variables

// scss-docs-start border-radius-variables
$border-radius: .375rem !default;
$border-radius-sm: .25rem !default;
$border-radius-lg: .5rem !default;
$border-radius-xl: 1rem !default;
$border-radius-xxl: 2rem !default;
$border-radius-pill: 50rem !default;
$border-radius: map-get($ouds-border-radiuses, null) !default; // OUDS mod: instead of .375rem
$border-radius-sm: map-get($ouds-border-radiuses, "short") !default; // OUDS mod: instead of .25rem
$border-radius-lg: map-get($ouds-border-radiuses, "medium") !default; // OUDS mod: instead of .5rem
$border-radius-xl: map-get($ouds-border-radiuses, "tall") !default; //OUDS mod: instead of 1rem
$border-radius-xxl: map-get($ouds-border-radiuses, "tall") * 1.5 !default; // OUDS mod: instead of 2rem
$border-radius-pill: map-get($ouds-border-radiuses, "pill") !default; // OUDS mod: instead of 50rem
// scss-docs-end border-radius-variables
// fusv-disable
$border-radius-2xl: $border-radius-xxl !default; // Deprecated in Bootstrap v5.3.0
Expand Down
Loading
Loading