Skip to content

Commit

Permalink
feat: creation of new 'size' tokens (#500)
Browse files Browse the repository at this point in the history 
BREAKING CHANGES: some tokens have been removed and some others added; specifically:
- the following tokens have been removed:
    - `--sbb-size-button-m-min-height-<breakpoint>`
    - `--sbb-size-button-l-min-height-<breakpoint>`
    - `--sbb-size-form-element-m-min-height-<breakpoint>`
    - `--sbb-size-form-element-l-min-height-<breakpoint>`
    - `--sbb-size-touch-min`
    - `--sbb-size-icon-timetable-attribute`
    - `--sbb-size-icon-timetable-him-cus`
    - `--sbb-size-icon-timetable-product-brand`
    - `--sbb-size-icon-pictograms`
    - `--sbb-size-icon-form-error`
- the following composed tokens have been removed:
    - `--sbb-size-button-m-min-height`
    - `--sbb-size-button-l-min-height`
    - `--sbb-size-form-element-m-min-height`
    - `--sbb-size-form-element-l-min-height`
- the following tokens have been added:
   - `--sbb-size-element-xs-<breakpoint>`
   - `--sbb-size-element-s-<breakpoint>`
   - `--sbb-size-element-m-<breakpoint>`
   - `--sbb-size-element-l-<breakpoint>`
- the following composed tokens have been added:
    - `--sbb-size-element-xs`
    - `--sbb-size-element-s`
    - `--sbb-size-element-m`
    - `--sbb-size-element-l`
  • Loading branch information
@DavideMininni-Fincons
DavideMininni-Fincons committed Apr 4, 2024
1 parent 0abb80f commit ced8d75
Show file tree
Hide file tree
Showing 2 changed files with 125 additions and 179 deletions.
24 changes: 10 additions & 14 deletions composed-variables/composed-variables.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,13 +45,11 @@
--sbb-grid-base-columns: var(--sbb-layout-base-grid-columns-zero);
--sbb-grid-base-gutter-responsive: var(--sbb-layout-base-grid-gutter-responsive-zero);

/* Button */
--sbb-size-button-m-min-height: var(--sbb-size-button-m-min-height-zero);
--sbb-size-button-l-min-height: var(--sbb-size-button-l-min-height-zero);

/* Form */
--sbb-size-form-element-m-min-height: var(--sbb-size-form-element-m-min-height-zero);
--sbb-size-form-element-l-min-height: var(--sbb-size-form-element-l-min-height-zero);
/* Size */
--sbb-size-element-xs: var(--sbb-size-element-xs-zero);
--sbb-size-element-s: var(--sbb-size-element-s-zero);
--sbb-size-element-m: var(--sbb-size-element-m-zero);
--sbb-size-element-l: var(--sbb-size-element-l-zero);

@media (forced-colors: active) {
/* Focus outline */
Expand Down Expand Up @@ -119,13 +117,11 @@
--sbb-grid-base-columns: var(--sbb-layout-base-grid-columns-medium);
--sbb-grid-base-gutter-responsive: var(--sbb-layout-base-grid-gutter-responsive-medium);

/* Button */
--sbb-size-button-m-min-height: var(--sbb-size-button-m-min-height-medium);
--sbb-size-button-l-min-height: var(--sbb-size-button-l-min-height-medium);

/* Form */
--sbb-size-form-element-m-min-height: var(--sbb-size-form-element-m-min-height-medium);
--sbb-size-form-element-l-min-height: var(--sbb-size-form-element-l-min-height-medium);
/* Size */
--sbb-size-element-xs: var(--sbb-size-element-xs-medium);
--sbb-size-element-s: var(--sbb-size-element-s-medium);
--sbb-size-element-m: var(--sbb-size-element-m-medium);
--sbb-size-element-l: var(--sbb-size-element-l-medium);
}

/**
Expand Down
280 changes: 115 additions & 165 deletions designTokens/size.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { DesignToken, DesignTokens } from 'style-dictionary';

const attributes = (group: string) =>
const attributes = (group?: string) =>
<Partial<DesignToken>>{
attributes: {
category: 'size',
Expand All @@ -9,152 +9,126 @@ const attributes = (group: string) =>
};

export const size: DesignTokens = {
button: {
m: {
min: {
height: {
zero: {
value: 44,
...attributes('button'),
},
micro: {
value: 44,
...attributes('button'),
},
small: {
value: 44,
...attributes('button'),
},
medium: {
value: 48,
...attributes('button'),
},
large: {
value: 48,
...attributes('button'),
},
wide: {
value: 48,
...attributes('button'),
},
ultra: {
value: 48,
...attributes('button'),
},
},
element: {
xs: {
zero: {
value: 36,
...attributes(),
},
micro: {
value: 36,
...attributes(),
},
small: {
value: 36,
...attributes(),
},
medium: {
value: 40,
...attributes(),
},
large: {
value: 40,
...attributes(),
},
wide: {
value: 40,
...attributes(),
},
ultra: {
value: 40,
...attributes(),
},
},
l: {
min: {
height: {
zero: {
value: 48,
...attributes('button'),
},
micro: {
value: 48,
...attributes('button'),
},
small: {
value: 48,
...attributes('button'),
},
medium: {
value: 56,
...attributes('button'),
},
large: {
value: 56,
...attributes('button'),
},
wide: {
value: 56,
...attributes('button'),
},
ultra: {
value: 56,
...attributes('button'),
},
},
s: {
zero: {
value: 44,
...attributes(),
},
micro: {
value: 44,
...attributes(),
},
small: {
value: 44,
...attributes(),
},
medium: {
value: 48,
...attributes(),
},
large: {
value: 48,
...attributes(),
},
wide: {
value: 48,
...attributes(),
},
ultra: {
value: 48,
...attributes(),
},
},
},
form: {
element: {
m: {
min: {
height: {
zero: {
value: 48,
...attributes('form'),
},
micro: {
value: 48,
...attributes('form'),
},
small: {
value: 48,
...attributes('form'),
},
medium: {
value: 56,
...attributes('form'),
},
large: {
value: 56,
...attributes('form'),
},
wide: {
value: 56,
...attributes('form'),
},
ultra: {
value: 56,
...attributes('form'),
},
},
},
},
l: {
min: {
height: {
zero: {
value: 56,
...attributes('form'),
},
micro: {
value: 56,
...attributes('form'),
},
small: {
value: 56,
...attributes('form'),
},
medium: {
value: 64,
...attributes('form'),
},
large: {
value: 64,
...attributes('form'),
},
wide: {
value: 64,
...attributes('form'),
},
ultra: {
value: 64,
...attributes('form'),
},
},
},
m: {
zero: {
value: 48,
...attributes(),
},
micro: {
value: 48,
...attributes(),
},
small: {
value: 48,
...attributes(),
},
medium: {
value: 56,
...attributes(),
},
large: {
value: 56,
...attributes(),
},
wide: {
value: 56,
...attributes(),
},
ultra: {
value: 56,
...attributes(),
},
},
},
touch: {
min: {
value: 44,
...attributes('touch'),
l: {
zero: {
value: 56,
...attributes(),
},
micro: {
value: 56,
...attributes(),
},
small: {
value: 56,
...attributes(),
},
medium: {
value: 64,
...attributes(),
},
large: {
value: 64,
...attributes(),
},
wide: {
value: 64,
...attributes(),
},
ultra: {
value: 64,
...attributes(),
},
},
},
icon: {
Expand All @@ -172,29 +146,5 @@ export const size: DesignTokens = {
...attributes('icon'),
},
},
timetable: {
attribute: {
value: 16,
...attributes('icon'),
},
'him-cus': {
value: 16,
...attributes('icon'),
},
'product-brand': {
value: 20,
...attributes('icon'),
},
},
pictograms: {
value: 24,
...attributes('icon'),
},
form: {
error: {
value: 17,
...attributes('icon'),
},
},
},
};

0 comments on commit ced8d75

Please sign in to comment.