diff --git a/composed-variables/composed-variables.css b/composed-variables/composed-variables.css index ccedd1ff..381e7aac 100644 --- a/composed-variables/composed-variables.css +++ b/composed-variables/composed-variables.css @@ -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 */ @@ -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); } /** diff --git a/designTokens/size.ts b/designTokens/size.ts index b1efb913..ef9c3fcf 100644 --- a/designTokens/size.ts +++ b/designTokens/size.ts @@ -1,6 +1,6 @@ import { DesignToken, DesignTokens } from 'style-dictionary'; -const attributes = (group: string) => +const attributes = (group?: string) => >{ attributes: { category: 'size', @@ -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: { @@ -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'), - }, - }, }, };