diff --git a/designsystem/src/main/assets/design_tokens/manifest.json b/designsystem/src/main/assets/design_tokens/manifest.json index 68cc305..92e632c 100644 --- a/designsystem/src/main/assets/design_tokens/manifest.json +++ b/designsystem/src/main/assets/design_tokens/manifest.json @@ -1,74 +1,77 @@ { - "name": "Design Tokens", "collections": { + ".documentation": { + "modes": { + "mode-1": [ + ".documentation.mode-1.tokens.json" + ] + } + }, + ".primitives": { + "modes": { + "alfie-theme": [ + ".primitives.alfie-theme.tokens.json" + ] + } + }, "screen-size": { "modes": { - "small-(s)": [ - "screen-size.small-(s).tokens.json" + "large-(l)": [ + "screen-size.large-(l).tokens.json" ], "medium-(m)": [ "screen-size.medium-(m).tokens.json" ], - "large-(l)": [ - "screen-size.large-(l).tokens.json" + "small-(s)": [ + "screen-size.small-(s).tokens.json" ], "wide-(xl)": [ "screen-size.wide-(xl).tokens.json" ] } }, - ".documentation": { + "sizing": { "modes": { - "mode-1": [ - ".documentation.mode-1.tokens.json" + "alfie-theme": [ + "sizing.alfie-theme.tokens.json" ] } }, "system": { "modes": { - "ios": [ - "system.ios.tokens.json" - ], "android": [ "system.android.tokens.json" ], + "ios": [ + "system.ios.tokens.json" + ], "web": [ "system.web.tokens.json" ] } }, - "typography": { - "modes": { - "alfie-theme": [ - "typography.alfie-theme.tokens.json" - ] - } - }, - ".primitives": { - "modes": { - "alfie-theme": [ - ".primitives.alfie-theme.tokens.json" - ] - } - }, "theme": { "modes": { "alfie-theme": [ "theme.alfie-theme.tokens.json" + ], + "selfridges": [ + "theme.selfridges.tokens.json" ] } }, - "sizing": { + "typography": { "modes": { "alfie-theme": [ - "sizing.alfie-theme.tokens.json" + "typography.alfie-theme.tokens.json" ] } } }, + "name": "Design Tokens", "styles": { "typography": [ "typography.styles.tokens.json" ] } -} \ No newline at end of file +} diff --git a/designsystem/src/main/assets/design_tokens/screen-size.large-(l).tokens.json b/designsystem/src/main/assets/design_tokens/screen-size.large-(l).tokens.json index 750971a..d3c68bf 100644 --- a/designsystem/src/main/assets/design_tokens/screen-size.large-(l).tokens.json +++ b/designsystem/src/main/assets/design_tokens/screen-size.large-(l).tokens.json @@ -1,36 +1,36 @@ { - "screen-size-screen-min-width": { + "screen-size-columns": { "$type": "dimension", - "$value": { - "value": 1366, - "unit": "px" - } + "$value": "{spacing-spacing-8}" + }, + "screen-size-gutter": { + "$type": "dimension", + "$value": "{spacing-spacing-16}" + }, + "screen-size-margin": { + "$type": "dimension", + "$value": "{spacing-spacing-24}" }, "screen-size-screen-max-width": { "$type": "dimension", "$value": { - "value": 1727, - "unit": "px" + "unit": "px", + "value": 1727 } }, "screen-size-screen-min-height": { "$type": "dimension", "$value": { - "value": 1024, - "unit": "px" + "unit": "px", + "value": 1024 } }, - "screen-size-columns": { - "$type": "dimension", - "$value": "{spacing-spacing-8}" - }, - "screen-size-margin": { - "$type": "dimension", - "$value": "{spacing-spacing-24}" - }, - "screen-size-gutter": { + "screen-size-screen-min-width": { "$type": "dimension", - "$value": "{spacing-spacing-16}" + "$value": { + "unit": "px", + "value": 1366 + } }, "typography-font-family-brand": { "$type": "fontFamily", @@ -40,30 +40,26 @@ "$type": "fontFamily", "$value": "{typography-font-family-primary-web}" }, - "typography-font-size-root-font-size": { - "$type": "dimension", - "$value": "{typography-font-size-font-size-s}" - }, - "typography-font-size-font-size-xs": { - "$type": "dimension", - "$value": "{typography-font-size-font-size-14}" - }, - "typography-font-size-font-size-s": { + "typography-font-size-font-size-l": { "$type": "dimension", - "$value": "{typography-font-size-font-size-20}" + "$value": "{typography-font-size-font-size-32}" }, "typography-font-size-font-size-m": { "$type": "dimension", "$value": "{typography-font-size-font-size-24}" }, - "typography-font-size-font-size-l": { + "typography-font-size-font-size-s": { "$type": "dimension", - "$value": "{typography-font-size-font-size-32}" + "$value": "{typography-font-size-font-size-20}" }, "typography-font-size-font-size-xl": { "$type": "dimension", "$value": "{typography-font-size-font-size-40}" }, + "typography-font-size-font-size-xs": { + "$type": "dimension", + "$value": "{typography-font-size-font-size-14}" + }, "typography-font-size-font-size-xxl": { "$type": "dimension", "$value": "{typography-font-size-font-size-48}" @@ -72,28 +68,32 @@ "$type": "dimension", "$value": "{typography-font-size-font-size-56}" }, - "typography-line-height-line-height-xxs": { - "$type": "dimension", - "$value": "{typography-line-height-line-height-20}" - }, - "typography-line-height-line-height-xs": { + "typography-font-size-root-font-size": { "$type": "dimension", - "$value": "{typography-line-height-line-height-20}" + "$value": "{typography-font-size-font-size-s}" }, - "typography-line-height-line-height-s": { + "typography-line-height-line-height-l": { "$type": "dimension", - "$value": "{typography-line-height-line-height-24}" + "$value": "{typography-line-height-line-height-40}" }, "typography-line-height-line-height-m": { "$type": "dimension", "$value": "{typography-line-height-line-height-32}" }, - "typography-line-height-line-height-l": { + "typography-line-height-line-height-s": { "$type": "dimension", - "$value": "{typography-line-height-line-height-40}" + "$value": "{typography-line-height-line-height-24}" }, "typography-line-height-line-height-xl": { "$type": "dimension", "$value": "{typography-line-height-line-height-48}" + }, + "typography-line-height-line-height-xs": { + "$type": "dimension", + "$value": "{typography-line-height-line-height-20}" + }, + "typography-line-height-line-height-xxs": { + "$type": "dimension", + "$value": "{typography-line-height-line-height-20}" } -} \ No newline at end of file +} diff --git a/designsystem/src/main/assets/design_tokens/screen-size.medium-(m).tokens.json b/designsystem/src/main/assets/design_tokens/screen-size.medium-(m).tokens.json index b889e10..709c72f 100644 --- a/designsystem/src/main/assets/design_tokens/screen-size.medium-(m).tokens.json +++ b/designsystem/src/main/assets/design_tokens/screen-size.medium-(m).tokens.json @@ -1,36 +1,36 @@ { - "screen-size-screen-min-width": { + "screen-size-columns": { "$type": "dimension", - "$value": { - "value": 600, - "unit": "px" - } + "$value": "{spacing-spacing-4}" + }, + "screen-size-gutter": { + "$type": "dimension", + "$value": "{spacing-spacing-16}" + }, + "screen-size-margin": { + "$type": "dimension", + "$value": "{spacing-spacing-24}" }, "screen-size-screen-max-width": { "$type": "dimension", "$value": { - "value": 1365, - "unit": "px" + "unit": "px", + "value": 1365 } }, "screen-size-screen-min-height": { "$type": "dimension", "$value": { - "value": 768, - "unit": "px" + "unit": "px", + "value": 768 } }, - "screen-size-columns": { - "$type": "dimension", - "$value": "{spacing-spacing-4}" - }, - "screen-size-margin": { - "$type": "dimension", - "$value": "{spacing-spacing-24}" - }, - "screen-size-gutter": { + "screen-size-screen-min-width": { "$type": "dimension", - "$value": "{spacing-spacing-16}" + "$value": { + "unit": "px", + "value": 600 + } }, "typography-font-family-brand": { "$type": "fontFamily", @@ -40,30 +40,26 @@ "$type": "fontFamily", "$value": "{typography-font-family-primary-web}" }, - "typography-font-size-root-font-size": { - "$type": "dimension", - "$value": "{typography-font-size-font-size-s}" - }, - "typography-font-size-font-size-xs": { - "$type": "dimension", - "$value": "{typography-font-size-font-size-12}" - }, - "typography-font-size-font-size-s": { + "typography-font-size-font-size-l": { "$type": "dimension", - "$value": "{typography-font-size-font-size-16}" + "$value": "{typography-font-size-font-size-24}" }, "typography-font-size-font-size-m": { "$type": "dimension", "$value": "{typography-font-size-font-size-20}" }, - "typography-font-size-font-size-l": { + "typography-font-size-font-size-s": { "$type": "dimension", - "$value": "{typography-font-size-font-size-24}" + "$value": "{typography-font-size-font-size-16}" }, "typography-font-size-font-size-xl": { "$type": "dimension", "$value": "{typography-font-size-font-size-32}" }, + "typography-font-size-font-size-xs": { + "$type": "dimension", + "$value": "{typography-font-size-font-size-12}" + }, "typography-font-size-font-size-xxl": { "$type": "dimension", "$value": "{typography-font-size-font-size-40}" @@ -72,28 +68,32 @@ "$type": "dimension", "$value": "{typography-font-size-font-size-48}" }, - "typography-line-height-line-height-xxs": { - "$type": "dimension", - "$value": "{typography-line-height-line-height-16}" - }, - "typography-line-height-line-height-xs": { + "typography-font-size-root-font-size": { "$type": "dimension", - "$value": "{typography-line-height-line-height-16}" + "$value": "{typography-font-size-font-size-s}" }, - "typography-line-height-line-height-s": { + "typography-line-height-line-height-l": { "$type": "dimension", - "$value": "{typography-line-height-line-height-20}" + "$value": "{typography-line-height-line-height-32}" }, "typography-line-height-line-height-m": { "$type": "dimension", "$value": "{typography-line-height-line-height-24}" }, - "typography-line-height-line-height-l": { + "typography-line-height-line-height-s": { "$type": "dimension", - "$value": "{typography-line-height-line-height-32}" + "$value": "{typography-line-height-line-height-20}" }, "typography-line-height-line-height-xl": { "$type": "dimension", "$value": "{typography-line-height-line-height-40}" + }, + "typography-line-height-line-height-xs": { + "$type": "dimension", + "$value": "{typography-line-height-line-height-16}" + }, + "typography-line-height-line-height-xxs": { + "$type": "dimension", + "$value": "{typography-line-height-line-height-16}" } -} \ No newline at end of file +} diff --git a/designsystem/src/main/assets/design_tokens/screen-size.small-(s).tokens.json b/designsystem/src/main/assets/design_tokens/screen-size.small-(s).tokens.json index ac33b7d..38a9237 100644 --- a/designsystem/src/main/assets/design_tokens/screen-size.small-(s).tokens.json +++ b/designsystem/src/main/assets/design_tokens/screen-size.small-(s).tokens.json @@ -1,27 +1,27 @@ { - "screen-size-screen-min-width": { + "screen-size-columns": { "$type": "dimension", - "$value": "{screen-size-system-screen-min-width}" + "$value": "{screen-size-system-columns}" }, - "screen-size-screen-max-width": { + "screen-size-gutter": { "$type": "dimension", - "$value": "{screen-size-system-screen-max-width}" + "$value": "{screen-size-system-gutter}" }, - "screen-size-screen-min-height": { + "screen-size-margin": { "$type": "dimension", - "$value": "{screen-size-system-screen-min-height}" + "$value": "{screen-size-system-margin}" }, - "screen-size-columns": { + "screen-size-screen-max-width": { "$type": "dimension", - "$value": "{screen-size-system-columns}" + "$value": "{screen-size-system-screen-max-width}" }, - "screen-size-margin": { + "screen-size-screen-min-height": { "$type": "dimension", - "$value": "{screen-size-system-margin}" + "$value": "{screen-size-system-screen-min-height}" }, - "screen-size-gutter": { + "screen-size-screen-min-width": { "$type": "dimension", - "$value": "{screen-size-system-gutter}" + "$value": "{screen-size-system-screen-min-width}" }, "typography-font-family-brand": { "$type": "fontFamily", @@ -31,30 +31,26 @@ "$type": "fontFamily", "$value": "{typography-font-family-system-primary}" }, - "typography-font-size-root-font-size": { - "$type": "dimension", - "$value": "{typography-font-size-system-root-font-size}" - }, - "typography-font-size-font-size-xs": { - "$type": "dimension", - "$value": "{typography-font-size-system-font-size-xs}" - }, - "typography-font-size-font-size-s": { + "typography-font-size-font-size-l": { "$type": "dimension", - "$value": "{typography-font-size-system-font-size-s}" + "$value": "{typography-font-size-system-font-size-l}" }, "typography-font-size-font-size-m": { "$type": "dimension", "$value": "{typography-font-size-system-font-size-m}" }, - "typography-font-size-font-size-l": { + "typography-font-size-font-size-s": { "$type": "dimension", - "$value": "{typography-font-size-system-font-size-l}" + "$value": "{typography-font-size-system-font-size-s}" }, "typography-font-size-font-size-xl": { "$type": "dimension", "$value": "{typography-font-size-system-font-size-xl}" }, + "typography-font-size-font-size-xs": { + "$type": "dimension", + "$value": "{typography-font-size-system-font-size-xs}" + }, "typography-font-size-font-size-xxl": { "$type": "dimension", "$value": "{typography-font-size-system-font-size-xxl}" @@ -63,28 +59,32 @@ "$type": "dimension", "$value": "{typography-font-size-system-font-size-xxxl}" }, - "typography-line-height-line-height-xxs": { - "$type": "dimension", - "$value": "{typography-line-height-system-line-height-xxs}" - }, - "typography-line-height-line-height-xs": { + "typography-font-size-root-font-size": { "$type": "dimension", - "$value": "{typography-line-height-system-line-height-xs}" + "$value": "{typography-font-size-system-root-font-size}" }, - "typography-line-height-line-height-s": { + "typography-line-height-line-height-l": { "$type": "dimension", - "$value": "{typography-line-height-system-line-height-s}" + "$value": "{typography-line-height-system-line-height-l}" }, "typography-line-height-line-height-m": { "$type": "dimension", "$value": "{typography-line-height-system-line-height-m}" }, - "typography-line-height-line-height-l": { + "typography-line-height-line-height-s": { "$type": "dimension", - "$value": "{typography-line-height-system-line-height-l}" + "$value": "{typography-line-height-system-line-height-s}" }, "typography-line-height-line-height-xl": { "$type": "dimension", "$value": "{typography-line-height-system-line-height-xl}" + }, + "typography-line-height-line-height-xs": { + "$type": "dimension", + "$value": "{typography-line-height-system-line-height-xs}" + }, + "typography-line-height-line-height-xxs": { + "$type": "dimension", + "$value": "{typography-line-height-system-line-height-xxs}" } -} \ No newline at end of file +} diff --git a/designsystem/src/main/assets/design_tokens/screen-size.wide-(xl).tokens.json b/designsystem/src/main/assets/design_tokens/screen-size.wide-(xl).tokens.json index 9b6db5f..a83de7e 100644 --- a/designsystem/src/main/assets/design_tokens/screen-size.wide-(xl).tokens.json +++ b/designsystem/src/main/assets/design_tokens/screen-size.wide-(xl).tokens.json @@ -1,36 +1,36 @@ { - "screen-size-screen-min-width": { + "screen-size-columns": { "$type": "dimension", - "$value": { - "value": 1728, - "unit": "px" - } + "$value": "{spacing-spacing-12}" + }, + "screen-size-gutter": { + "$type": "dimension", + "$value": "{spacing-spacing-24}" + }, + "screen-size-margin": { + "$type": "dimension", + "$value": "{spacing-spacing-220}" }, "screen-size-screen-max-width": { "$type": "dimension", "$value": { - "value": 1920, - "unit": "px" + "unit": "px", + "value": 1920 } }, "screen-size-screen-min-height": { "$type": "dimension", "$value": { - "value": 1117, - "unit": "px" + "unit": "px", + "value": 1117 } }, - "screen-size-columns": { - "$type": "dimension", - "$value": "{spacing-spacing-12}" - }, - "screen-size-margin": { - "$type": "dimension", - "$value": "{spacing-spacing-220}" - }, - "screen-size-gutter": { + "screen-size-screen-min-width": { "$type": "dimension", - "$value": "{spacing-spacing-24}" + "$value": { + "unit": "px", + "value": 1728 + } }, "typography-font-family-brand": { "$type": "fontFamily", @@ -40,30 +40,26 @@ "$type": "fontFamily", "$value": "{typography-font-family-primary-web}" }, - "typography-font-size-root-font-size": { - "$type": "dimension", - "$value": "{typography-font-size-font-size-s}" - }, - "typography-font-size-font-size-xs": { - "$type": "dimension", - "$value": "{typography-font-size-font-size-14}" - }, - "typography-font-size-font-size-s": { + "typography-font-size-font-size-l": { "$type": "dimension", - "$value": "{typography-font-size-font-size-20}" + "$value": "{typography-font-size-font-size-32}" }, "typography-font-size-font-size-m": { "$type": "dimension", "$value": "{typography-font-size-font-size-24}" }, - "typography-font-size-font-size-l": { + "typography-font-size-font-size-s": { "$type": "dimension", - "$value": "{typography-font-size-font-size-32}" + "$value": "{typography-font-size-font-size-20}" }, "typography-font-size-font-size-xl": { "$type": "dimension", "$value": "{typography-font-size-font-size-40}" }, + "typography-font-size-font-size-xs": { + "$type": "dimension", + "$value": "{typography-font-size-font-size-14}" + }, "typography-font-size-font-size-xxl": { "$type": "dimension", "$value": "{typography-font-size-font-size-48}" @@ -72,28 +68,32 @@ "$type": "dimension", "$value": "{typography-font-size-font-size-56}" }, - "typography-line-height-line-height-xxs": { - "$type": "dimension", - "$value": "{typography-line-height-line-height-20}" - }, - "typography-line-height-line-height-xs": { + "typography-font-size-root-font-size": { "$type": "dimension", - "$value": "{typography-line-height-line-height-20}" + "$value": "{typography-font-size-font-size-s}" }, - "typography-line-height-line-height-s": { + "typography-line-height-line-height-l": { "$type": "dimension", - "$value": "{typography-line-height-line-height-24}" + "$value": "{typography-line-height-line-height-40}" }, "typography-line-height-line-height-m": { "$type": "dimension", "$value": "{typography-line-height-line-height-32}" }, - "typography-line-height-line-height-l": { + "typography-line-height-line-height-s": { "$type": "dimension", - "$value": "{typography-line-height-line-height-40}" + "$value": "{typography-line-height-line-height-24}" }, "typography-line-height-line-height-xl": { "$type": "dimension", "$value": "{typography-line-height-line-height-48}" + }, + "typography-line-height-line-height-xs": { + "$type": "dimension", + "$value": "{typography-line-height-line-height-20}" + }, + "typography-line-height-line-height-xxs": { + "$type": "dimension", + "$value": "{typography-line-height-line-height-20}" } -} \ No newline at end of file +} diff --git a/designsystem/src/main/assets/design_tokens/sizing.alfie-theme.tokens.json b/designsystem/src/main/assets/design_tokens/sizing.alfie-theme.tokens.json index 25a9389..826cf97 100644 --- a/designsystem/src/main/assets/design_tokens/sizing.alfie-theme.tokens.json +++ b/designsystem/src/main/assets/design_tokens/sizing.alfie-theme.tokens.json @@ -1,41 +1,41 @@ { - "icons-icon-small": { + "icons-icon-large": { "$type": "dimension", - "$value": "{spacing-spacing-16}" + "$value": "{spacing-spacing-32}" }, "icons-icon-medium": { "$type": "dimension", "$value": "{spacing-spacing-24}" }, - "icons-icon-large": { + "icons-icon-small": { "$type": "dimension", - "$value": "{spacing-spacing-32}" + "$value": "{spacing-spacing-16}" }, "icons-icon-xlarge": { "$type": "dimension", "$value": "{spacing-spacing-40}" }, - "radius-soft": { + "interactive-small-padding-left-right": { "$type": "dimension", - "$value": "{spacing-spacing-4}" + "$value": "{spacing-spacing-8}" }, - "radius-strong": { + "interactive-small-padding-top-bottom": { "$type": "dimension", - "$value": "{spacing-spacing-16}" + "$value": "{spacing-spacing-8}" }, "radius-rounded": { "$type": "dimension", "$value": { - "value": 1000, - "unit": "px" + "unit": "px", + "value": 1000 } }, - "interactive-small-padding-top-bottom": { + "radius-soft": { "$type": "dimension", - "$value": "{spacing-spacing-8}" + "$value": "{spacing-spacing-4}" }, - "interactive-small-padding-left-right": { + "radius-strong": { "$type": "dimension", - "$value": "{spacing-spacing-8}" + "$value": "{spacing-spacing-16}" } -} \ No newline at end of file +} diff --git a/designsystem/src/main/assets/design_tokens/system.android.tokens.json b/designsystem/src/main/assets/design_tokens/system.android.tokens.json index 28fbff5..6e3eab7 100644 --- a/designsystem/src/main/assets/design_tokens/system.android.tokens.json +++ b/designsystem/src/main/assets/design_tokens/system.android.tokens.json @@ -1,69 +1,69 @@ { - "screen-size-system-screen-min-width": { - "$type": "dimension", - "$value": { - "value": 360, - "unit": "px" - } + "os": { + "$type": "string", + "$value": "Android" }, - "typography-font-family-system-brand": { - "$type": "fontFamily", - "$value": "{typography-font-family-brand}" + "screen-size-system-columns": { + "$type": "dimension", + "$value": "{spacing-spacing-2}" }, - "typography-font-family-system-primary": { - "$type": "fontFamily", - "$value": "{typography-font-family-primary-android}" + "screen-size-system-gutter": { + "$type": "dimension", + "$value": "{spacing-spacing-8}" }, - "typography-font-size-system-root-font-size": { + "screen-size-system-margin": { "$type": "dimension", - "$value": "{typography-font-size-system-font-size-s}" + "$value": "{spacing-spacing-16}" }, "screen-size-system-screen-max-width": { "$type": "dimension", "$value": { - "value": 599, - "unit": "px" + "unit": "px", + "value": 599 } }, "screen-size-system-screen-min-height": { "$type": "dimension", "$value": { - "value": 640, - "unit": "px" + "unit": "px", + "value": 640 } }, - "screen-size-system-columns": { - "$type": "dimension", - "$value": "{spacing-spacing-2}" - }, - "screen-size-system-margin": { + "screen-size-system-screen-min-width": { "$type": "dimension", - "$value": "{spacing-spacing-16}" + "$value": { + "unit": "px", + "value": 360 + } }, - "screen-size-system-gutter": { - "$type": "dimension", - "$value": "{spacing-spacing-8}" + "typography-font-family-system-brand": { + "$type": "fontFamily", + "$value": "{typography-font-family-brand}" }, - "typography-font-size-system-font-size-xs": { - "$type": "dimension", - "$value": "{typography-font-size-font-size-12}" + "typography-font-family-system-primary": { + "$type": "fontFamily", + "$value": "{typography-font-family-primary-android}" }, - "typography-font-size-system-font-size-s": { + "typography-font-size-system-font-size-l": { "$type": "dimension", - "$value": "{typography-font-size-font-size-16}" + "$value": "{typography-font-size-font-size-20}" }, "typography-font-size-system-font-size-m": { "$type": "dimension", "$value": "{typography-font-size-font-size-18}" }, - "typography-font-size-system-font-size-l": { + "typography-font-size-system-font-size-s": { "$type": "dimension", - "$value": "{typography-font-size-font-size-20}" + "$value": "{typography-font-size-font-size-16}" }, "typography-font-size-system-font-size-xl": { "$type": "dimension", "$value": "{typography-font-size-font-size-24}" }, + "typography-font-size-system-font-size-xs": { + "$type": "dimension", + "$value": "{typography-font-size-font-size-12}" + }, "typography-font-size-system-font-size-xxl": { "$type": "dimension", "$value": "{typography-font-size-font-size-32}" @@ -72,32 +72,36 @@ "$type": "dimension", "$value": "{typography-font-size-font-size-40}" }, - "typography-line-height-system-line-height-xxs": { - "$type": "dimension", - "$value": "{typography-line-height-line-height-16}" - }, - "typography-line-height-system-line-height-xs": { + "typography-font-size-system-root-font-size": { "$type": "dimension", - "$value": "{typography-line-height-line-height-20}" + "$value": "{typography-font-size-system-font-size-s}" }, - "typography-line-height-system-line-height-s": { + "typography-line-height-system-line-height-l": { "$type": "dimension", - "$value": "{typography-line-height-line-height-24}" + "$value": "{typography-line-height-line-height-32}" }, "typography-line-height-system-line-height-m": { "$type": "dimension", "$value": "{typography-line-height-line-height-28}" }, - "typography-line-height-system-line-height-l": { + "typography-line-height-system-line-height-s": { "$type": "dimension", - "$value": "{typography-line-height-line-height-32}" + "$value": "{typography-line-height-line-height-24}" }, "typography-line-height-system-line-height-xl": { "$type": "dimension", "$value": "{typography-line-height-line-height-40}" }, + "typography-line-height-system-line-height-xs": { + "$type": "dimension", + "$value": "{typography-line-height-line-height-20}" + }, "typography-line-height-system-line-height-xxl": { "$type": "dimension", "$value": "{typography-line-height-line-height-48}" + }, + "typography-line-height-system-line-height-xxs": { + "$type": "dimension", + "$value": "{typography-line-height-line-height-16}" } -} \ No newline at end of file +} diff --git a/designsystem/src/main/assets/design_tokens/system.ios.tokens.json b/designsystem/src/main/assets/design_tokens/system.ios.tokens.json index f23b6a0..64ea1f2 100644 --- a/designsystem/src/main/assets/design_tokens/system.ios.tokens.json +++ b/designsystem/src/main/assets/design_tokens/system.ios.tokens.json @@ -1,69 +1,69 @@ { - "screen-size-system-screen-min-width": { - "$type": "dimension", - "$value": { - "value": 375, - "unit": "px" - } + "os": { + "$type": "string", + "$value": "iOS" }, - "typography-font-family-system-brand": { - "$type": "fontFamily", - "$value": "{typography-font-family-brand}" + "screen-size-system-columns": { + "$type": "dimension", + "$value": "{spacing-spacing-2}" }, - "typography-font-family-system-primary": { - "$type": "fontFamily", - "$value": "{typography-font-family-primary-ios}" + "screen-size-system-gutter": { + "$type": "dimension", + "$value": "{spacing-spacing-8}" }, - "typography-font-size-system-root-font-size": { + "screen-size-system-margin": { "$type": "dimension", - "$value": "{typography-font-size-system-font-size-s}" + "$value": "{spacing-spacing-16}" }, "screen-size-system-screen-max-width": { "$type": "dimension", "$value": { - "value": 599, - "unit": "px" + "unit": "px", + "value": 599 } }, "screen-size-system-screen-min-height": { "$type": "dimension", "$value": { - "value": 812, - "unit": "px" + "unit": "px", + "value": 812 } }, - "screen-size-system-columns": { - "$type": "dimension", - "$value": "{spacing-spacing-2}" - }, - "screen-size-system-margin": { + "screen-size-system-screen-min-width": { "$type": "dimension", - "$value": "{spacing-spacing-16}" + "$value": { + "unit": "px", + "value": 375 + } }, - "screen-size-system-gutter": { - "$type": "dimension", - "$value": "{spacing-spacing-8}" + "typography-font-family-system-brand": { + "$type": "fontFamily", + "$value": "{typography-font-family-brand}" }, - "typography-font-size-system-font-size-xs": { - "$type": "dimension", - "$value": "{typography-font-size-font-size-12}" + "typography-font-family-system-primary": { + "$type": "fontFamily", + "$value": "{typography-font-family-primary-ios}" }, - "typography-font-size-system-font-size-s": { + "typography-font-size-system-font-size-l": { "$type": "dimension", - "$value": "{typography-font-size-font-size-16}" + "$value": "{typography-font-size-font-size-20}" }, "typography-font-size-system-font-size-m": { "$type": "dimension", "$value": "{typography-font-size-font-size-18}" }, - "typography-font-size-system-font-size-l": { + "typography-font-size-system-font-size-s": { "$type": "dimension", - "$value": "{typography-font-size-font-size-20}" + "$value": "{typography-font-size-font-size-16}" }, "typography-font-size-system-font-size-xl": { "$type": "dimension", "$value": "{typography-font-size-font-size-24}" }, + "typography-font-size-system-font-size-xs": { + "$type": "dimension", + "$value": "{typography-font-size-font-size-12}" + }, "typography-font-size-system-font-size-xxl": { "$type": "dimension", "$value": "{typography-font-size-font-size-32}" @@ -72,32 +72,36 @@ "$type": "dimension", "$value": "{typography-font-size-font-size-40}" }, - "typography-line-height-system-line-height-xxs": { - "$type": "dimension", - "$value": "{typography-line-height-line-height-16}" - }, - "typography-line-height-system-line-height-xs": { + "typography-font-size-system-root-font-size": { "$type": "dimension", - "$value": "{typography-line-height-line-height-20}" + "$value": "{typography-font-size-system-font-size-s}" }, - "typography-line-height-system-line-height-s": { + "typography-line-height-system-line-height-l": { "$type": "dimension", - "$value": "{typography-line-height-line-height-24}" + "$value": "{typography-line-height-line-height-32}" }, "typography-line-height-system-line-height-m": { "$type": "dimension", "$value": "{typography-line-height-line-height-28}" }, - "typography-line-height-system-line-height-l": { + "typography-line-height-system-line-height-s": { "$type": "dimension", - "$value": "{typography-line-height-line-height-32}" + "$value": "{typography-line-height-line-height-24}" }, "typography-line-height-system-line-height-xl": { "$type": "dimension", "$value": "{typography-line-height-line-height-40}" }, + "typography-line-height-system-line-height-xs": { + "$type": "dimension", + "$value": "{typography-line-height-line-height-20}" + }, "typography-line-height-system-line-height-xxl": { "$type": "dimension", "$value": "{typography-line-height-line-height-48}" + }, + "typography-line-height-system-line-height-xxs": { + "$type": "dimension", + "$value": "{typography-line-height-line-height-16}" } -} \ No newline at end of file +} diff --git a/designsystem/src/main/assets/design_tokens/system.web.tokens.json b/designsystem/src/main/assets/design_tokens/system.web.tokens.json index 77d13df..dcbfc8e 100644 --- a/designsystem/src/main/assets/design_tokens/system.web.tokens.json +++ b/designsystem/src/main/assets/design_tokens/system.web.tokens.json @@ -1,69 +1,69 @@ { - "screen-size-system-screen-min-width": { - "$type": "dimension", - "$value": { - "value": 375, - "unit": "px" - } + "os": { + "$type": "string", + "$value": "Web" }, - "typography-font-family-system-brand": { - "$type": "fontFamily", - "$value": "{typography-font-family-brand}" + "screen-size-system-columns": { + "$type": "dimension", + "$value": "{spacing-spacing-2}" }, - "typography-font-family-system-primary": { - "$type": "fontFamily", - "$value": "{typography-font-family-primary-web}" + "screen-size-system-gutter": { + "$type": "dimension", + "$value": "{spacing-spacing-8}" }, - "typography-font-size-system-root-font-size": { + "screen-size-system-margin": { "$type": "dimension", - "$value": "{typography-font-size-system-font-size-s}" + "$value": "{spacing-spacing-16}" }, "screen-size-system-screen-max-width": { "$type": "dimension", "$value": { - "value": 599, - "unit": "px" + "unit": "px", + "value": 599 } }, "screen-size-system-screen-min-height": { "$type": "dimension", "$value": { - "value": 812, - "unit": "px" + "unit": "px", + "value": 812 } }, - "screen-size-system-columns": { - "$type": "dimension", - "$value": "{spacing-spacing-2}" - }, - "screen-size-system-margin": { + "screen-size-system-screen-min-width": { "$type": "dimension", - "$value": "{spacing-spacing-16}" + "$value": { + "unit": "px", + "value": 375 + } }, - "screen-size-system-gutter": { - "$type": "dimension", - "$value": "{spacing-spacing-8}" + "typography-font-family-system-brand": { + "$type": "fontFamily", + "$value": "{typography-font-family-brand}" }, - "typography-font-size-system-font-size-xs": { - "$type": "dimension", - "$value": "{typography-font-size-font-size-12}" + "typography-font-family-system-primary": { + "$type": "fontFamily", + "$value": "{typography-font-family-primary-web}" }, - "typography-font-size-system-font-size-s": { + "typography-font-size-system-font-size-l": { "$type": "dimension", - "$value": "{typography-font-size-font-size-16}" + "$value": "{typography-font-size-font-size-20}" }, "typography-font-size-system-font-size-m": { "$type": "dimension", "$value": "{typography-font-size-font-size-18}" }, - "typography-font-size-system-font-size-l": { + "typography-font-size-system-font-size-s": { "$type": "dimension", - "$value": "{typography-font-size-font-size-20}" + "$value": "{typography-font-size-font-size-16}" }, "typography-font-size-system-font-size-xl": { "$type": "dimension", "$value": "{typography-font-size-font-size-24}" }, + "typography-font-size-system-font-size-xs": { + "$type": "dimension", + "$value": "{typography-font-size-font-size-12}" + }, "typography-font-size-system-font-size-xxl": { "$type": "dimension", "$value": "{typography-font-size-font-size-32}" @@ -72,32 +72,36 @@ "$type": "dimension", "$value": "{typography-font-size-font-size-40}" }, - "typography-line-height-system-line-height-xxs": { - "$type": "dimension", - "$value": "{typography-line-height-line-height-16}" - }, - "typography-line-height-system-line-height-xs": { + "typography-font-size-system-root-font-size": { "$type": "dimension", - "$value": "{typography-line-height-line-height-20}" + "$value": "{typography-font-size-system-font-size-s}" }, - "typography-line-height-system-line-height-s": { + "typography-line-height-system-line-height-l": { "$type": "dimension", - "$value": "{typography-line-height-line-height-24}" + "$value": "{typography-line-height-line-height-32}" }, "typography-line-height-system-line-height-m": { "$type": "dimension", "$value": "{typography-line-height-line-height-28}" }, - "typography-line-height-system-line-height-l": { + "typography-line-height-system-line-height-s": { "$type": "dimension", - "$value": "{typography-line-height-line-height-32}" + "$value": "{typography-line-height-line-height-24}" }, "typography-line-height-system-line-height-xl": { "$type": "dimension", "$value": "{typography-line-height-line-height-40}" }, + "typography-line-height-system-line-height-xs": { + "$type": "dimension", + "$value": "{typography-line-height-line-height-20}" + }, "typography-line-height-system-line-height-xxl": { "$type": "dimension", "$value": "{typography-line-height-line-height-48}" + }, + "typography-line-height-system-line-height-xxs": { + "$type": "dimension", + "$value": "{typography-line-height-line-height-16}" } -} \ No newline at end of file +} diff --git a/designsystem/src/main/assets/design_tokens/theme.alfie-theme.tokens.json b/designsystem/src/main/assets/design_tokens/theme.alfie-theme.tokens.json index 5af3bf0..68d5de2 100644 --- a/designsystem/src/main/assets/design_tokens/theme.alfie-theme.tokens.json +++ b/designsystem/src/main/assets/design_tokens/theme.alfie-theme.tokens.json @@ -1,51 +1,107 @@ { - "surface-background-primary": { + "border-medium": { + "$type": "color", + "$value": "{colours-neutrals-400}" + }, + "border-soft": { + "$type": "color", + "$value": "{colours-neutrals-200}" + }, + "button-destructive-background-destructive-default": { + "$type": "color", + "$value": "{surface-background-destructive}" + }, + "button-destructive-background-destructive-disabled": { + "$type": "color", + "$value": "{colours-neutrals-300}" + }, + "button-destructive-content-destructive-default": { "$type": "color", "$value": "{colours-neutrals-0}" }, - "surface-background-primary-active": { + "button-destructive-content-destructive-disabled": { "$type": "color", - "$value": "{colours-neutrals-800}" + "$value": "{colours-neutrals-500}" }, - "surface-background-inverted-primary": { + "button-destructive-stroke-destructive-default": { + "$type": "color", + "$value": "{surface-background-destructive}" + }, + "button-destructive-stroke-destructive-disabled": { + "$type": "color", + "$value": "{colours-neutrals-300}" + }, + "button-primary-background-primary-default": { + "$type": "color", + "$value": "{surface-background-inverted-primary}" + }, + "button-primary-background-primary-disabled": { + "$type": "color", + "$value": "{colours-neutrals-300}" + }, + "button-primary-content-primary-default": { + "$type": "color", + "$value": "{colours-neutrals-0}" + }, + "button-primary-content-primary-disabled": { + "$type": "color", + "$value": "{colours-neutrals-500}" + }, + "button-primary-stroke-primary-default": { "$type": "color", "$value": "{colours-neutrals-800}" }, - "surface-background-terciary": { + "button-primary-stroke-primary-disabled": { "$type": "color", "$value": "{colours-neutrals-300}" }, - "surface-background-destructive": { + "button-secondary-background-secondary-default": { "$type": "color", - "$value": "{colours-semantic-error-600}" + "$value": "{colours-transparent-transparent}" }, - "surface-background-negative": { + "button-secondary-background-secondary-disabled": { "$type": "color", - "$value": "{colours-semantic-error-500}" + "$value": "{colours-transparent-transparent}" }, - "surface-background-positive": { + "button-secondary-content-secondary-default": { "$type": "color", - "$value": "{colours-semantic-success-600}" + "$value": "{colours-neutrals-800}" }, - "surface-foreground-primary": { + "button-secondary-content-secondary-disabled": { "$type": "color", - "$value": "{colours-neutrals-100}" + "$value": "{colours-neutrals-500}" }, - "surface-foreground-inverted-primary": { + "button-secondary-stroke-secondary-default": { "$type": "color", - "$value": "{colours-neutrals-700}" + "$value": "{colours-neutrals-900}" }, - "content-content-primary": { + "button-secondary-stroke-secondary-disabled": { + "$type": "color", + "$value": "{colours-neutrals-500}" + }, + "button-terciary-background-terciary-default": { + "$type": "color", + "$value": "{colours-transparent-transparent}" + }, + "button-terciary-background-terciary-disabled": { + "$type": "color", + "$value": "{colours-transparent-transparent}" + }, + "button-terciary-content-terciary-default": { "$type": "color", "$value": "{colours-neutrals-800}" }, - "content-content-primary-active": { + "button-terciary-content-terciary-disabled": { "$type": "color", - "$value": "{colours-neutrals-0}" + "$value": "{colours-neutrals-500}" }, - "content-content-primary-disabled": { + "button-terciary-stroke-terciary-default": { "$type": "color", - "$value": "{colours-neutrals-400}" + "$value": "{colours-transparent-transparent}" + }, + "button-terciary-stroke-terciary-disabled": { + "$type": "color", + "$value": "{colours-transparent-transparent}" }, "content-content-inverted-primary": { "$type": "color", @@ -55,10 +111,6 @@ "$type": "color", "$value": "{colours-neutrals-500}" }, - "content-content-terciary": { - "$type": "color", - "$value": "{colours-neutrals-500}" - }, "content-content-negative": { "$type": "color", "$value": "{colours-semantic-error-500}" @@ -67,6 +119,22 @@ "$type": "color", "$value": "{colours-semantic-success-400}" }, + "content-content-primary": { + "$type": "color", + "$value": "{colours-neutrals-800}" + }, + "content-content-primary-active": { + "$type": "color", + "$value": "{colours-neutrals-0}" + }, + "content-content-primary-disabled": { + "$type": "color", + "$value": "{colours-neutrals-400}" + }, + "content-content-terciary": { + "$type": "color", + "$value": "{colours-neutrals-500}" + }, "link-link-primary-default": { "$type": "color", "$value": "{content-content-primary}" @@ -83,44 +151,40 @@ "$type": "color", "$value": "{content-content-inverted-primarydisabled}" }, - "button-primary-background-primary-default": { - "$type": "color", - "$value": "{surface-background-inverted-primary}" - }, - "button-secondary-background-secondary-default": { + "surface-background-destructive": { "$type": "color", - "$value": "{colours-transparent-transparent}" + "$value": "{colours-semantic-error-600}" }, - "button-secondary-background-secondary-disabled": { + "surface-background-inverted-primary": { "$type": "color", - "$value": "{colours-transparent-transparent}" + "$value": "{colours-neutrals-800}" }, - "button-terciary-background-terciary-default": { + "surface-background-negative": { "$type": "color", - "$value": "{colours-transparent-transparent}" + "$value": "{colours-semantic-error-500}" }, - "button-terciary-stroke-terciary-default": { + "surface-background-positive": { "$type": "color", - "$value": "{colours-transparent-transparent}" + "$value": "{colours-semantic-success-600}" }, - "button-terciary-background-terciary-disabled": { + "surface-background-primary": { "$type": "color", - "$value": "{colours-transparent-transparent}" + "$value": "{colours-neutrals-0}" }, - "button-terciary-stroke-terciary-disabled": { + "surface-background-primary-active": { "$type": "color", - "$value": "{colours-transparent-transparent}" + "$value": "{colours-neutrals-800}" }, - "button-destructive-background-destructive-default": { + "surface-background-terciary": { "$type": "color", - "$value": "{surface-background-destructive}" + "$value": "{colours-neutrals-300}" }, - "button-destructive-stroke-destructive-default": { + "surface-foreground-inverted-primary": { "$type": "color", - "$value": "{surface-background-destructive}" + "$value": "{colours-neutrals-700}" }, - "border-soft": { + "surface-foreground-primary": { "$type": "color", - "$value": "{colours-neutrals-200}" + "$value": "{colours-neutrals-100}" } -} \ No newline at end of file +} diff --git a/designsystem/src/main/assets/design_tokens/theme.selfridges.tokens.json b/designsystem/src/main/assets/design_tokens/theme.selfridges.tokens.json new file mode 100644 index 0000000..68d5de2 --- /dev/null +++ b/designsystem/src/main/assets/design_tokens/theme.selfridges.tokens.json @@ -0,0 +1,190 @@ +{ + "border-medium": { + "$type": "color", + "$value": "{colours-neutrals-400}" + }, + "border-soft": { + "$type": "color", + "$value": "{colours-neutrals-200}" + }, + "button-destructive-background-destructive-default": { + "$type": "color", + "$value": "{surface-background-destructive}" + }, + "button-destructive-background-destructive-disabled": { + "$type": "color", + "$value": "{colours-neutrals-300}" + }, + "button-destructive-content-destructive-default": { + "$type": "color", + "$value": "{colours-neutrals-0}" + }, + "button-destructive-content-destructive-disabled": { + "$type": "color", + "$value": "{colours-neutrals-500}" + }, + "button-destructive-stroke-destructive-default": { + "$type": "color", + "$value": "{surface-background-destructive}" + }, + "button-destructive-stroke-destructive-disabled": { + "$type": "color", + "$value": "{colours-neutrals-300}" + }, + "button-primary-background-primary-default": { + "$type": "color", + "$value": "{surface-background-inverted-primary}" + }, + "button-primary-background-primary-disabled": { + "$type": "color", + "$value": "{colours-neutrals-300}" + }, + "button-primary-content-primary-default": { + "$type": "color", + "$value": "{colours-neutrals-0}" + }, + "button-primary-content-primary-disabled": { + "$type": "color", + "$value": "{colours-neutrals-500}" + }, + "button-primary-stroke-primary-default": { + "$type": "color", + "$value": "{colours-neutrals-800}" + }, + "button-primary-stroke-primary-disabled": { + "$type": "color", + "$value": "{colours-neutrals-300}" + }, + "button-secondary-background-secondary-default": { + "$type": "color", + "$value": "{colours-transparent-transparent}" + }, + "button-secondary-background-secondary-disabled": { + "$type": "color", + "$value": "{colours-transparent-transparent}" + }, + "button-secondary-content-secondary-default": { + "$type": "color", + "$value": "{colours-neutrals-800}" + }, + "button-secondary-content-secondary-disabled": { + "$type": "color", + "$value": "{colours-neutrals-500}" + }, + "button-secondary-stroke-secondary-default": { + "$type": "color", + "$value": "{colours-neutrals-900}" + }, + "button-secondary-stroke-secondary-disabled": { + "$type": "color", + "$value": "{colours-neutrals-500}" + }, + "button-terciary-background-terciary-default": { + "$type": "color", + "$value": "{colours-transparent-transparent}" + }, + "button-terciary-background-terciary-disabled": { + "$type": "color", + "$value": "{colours-transparent-transparent}" + }, + "button-terciary-content-terciary-default": { + "$type": "color", + "$value": "{colours-neutrals-800}" + }, + "button-terciary-content-terciary-disabled": { + "$type": "color", + "$value": "{colours-neutrals-500}" + }, + "button-terciary-stroke-terciary-default": { + "$type": "color", + "$value": "{colours-transparent-transparent}" + }, + "button-terciary-stroke-terciary-disabled": { + "$type": "color", + "$value": "{colours-transparent-transparent}" + }, + "content-content-inverted-primary": { + "$type": "color", + "$value": "{colours-neutrals-0}" + }, + "content-content-inverted-primarydisabled": { + "$type": "color", + "$value": "{colours-neutrals-500}" + }, + "content-content-negative": { + "$type": "color", + "$value": "{colours-semantic-error-500}" + }, + "content-content-positive": { + "$type": "color", + "$value": "{colours-semantic-success-400}" + }, + "content-content-primary": { + "$type": "color", + "$value": "{colours-neutrals-800}" + }, + "content-content-primary-active": { + "$type": "color", + "$value": "{colours-neutrals-0}" + }, + "content-content-primary-disabled": { + "$type": "color", + "$value": "{colours-neutrals-400}" + }, + "content-content-terciary": { + "$type": "color", + "$value": "{colours-neutrals-500}" + }, + "link-link-primary-default": { + "$type": "color", + "$value": "{content-content-primary}" + }, + "link-link-primary-disabled": { + "$type": "color", + "$value": "{content-content-primary-disabled}" + }, + "link-link-primary-inverted-default": { + "$type": "color", + "$value": "{content-content-inverted-primary}" + }, + "link-link-primary-inverted-disabled": { + "$type": "color", + "$value": "{content-content-inverted-primarydisabled}" + }, + "surface-background-destructive": { + "$type": "color", + "$value": "{colours-semantic-error-600}" + }, + "surface-background-inverted-primary": { + "$type": "color", + "$value": "{colours-neutrals-800}" + }, + "surface-background-negative": { + "$type": "color", + "$value": "{colours-semantic-error-500}" + }, + "surface-background-positive": { + "$type": "color", + "$value": "{colours-semantic-success-600}" + }, + "surface-background-primary": { + "$type": "color", + "$value": "{colours-neutrals-0}" + }, + "surface-background-primary-active": { + "$type": "color", + "$value": "{colours-neutrals-800}" + }, + "surface-background-terciary": { + "$type": "color", + "$value": "{colours-neutrals-300}" + }, + "surface-foreground-inverted-primary": { + "$type": "color", + "$value": "{colours-neutrals-700}" + }, + "surface-foreground-primary": { + "$type": "color", + "$value": "{colours-neutrals-100}" + } +} diff --git a/designsystem/src/main/assets/design_tokens/typography.alfie-theme.tokens.json b/designsystem/src/main/assets/design_tokens/typography.alfie-theme.tokens.json index cea2b3f..5daffa0 100644 --- a/designsystem/src/main/assets/design_tokens/typography.alfie-theme.tokens.json +++ b/designsystem/src/main/assets/design_tokens/typography.alfie-theme.tokens.json @@ -1,302 +1,362 @@ { - "display-large-font-family": { + "body-large-font-family": { "$type": "fontFamily", - "$value": "{typography-font-family-brand}" + "$value": "{typography-font-family-primary}" }, - "display-large-font-weight": { + "body-large-font-size": { + "$type": "dimension", + "$value": "{typography-font-size-font-size-m}" + }, + "body-large-font-weight": { + "$type": "fontWeight", + "$value": "{typography-font-weight-regular}" + }, + "body-large-kerning": { + "$type": "dimension", + "$value": "{typography-kerning-none}" + }, + "body-large-line-height": { + "$type": "dimension", + "$value": "{typography-line-height-system-line-height-m}" + }, + "body-large-text-style-name": { "$type": "string", + "$value": "body-large" + }, + "body-medium-font-family": { + "$type": "fontFamily", + "$value": "{typography-font-family-primary}" + }, + "body-medium-font-size": { + "$type": "dimension", + "$value": "{typography-font-size-font-size-s}" + }, + "body-medium-font-weight": { + "$type": "fontWeight", "$value": "{typography-font-weight-regular}" }, + "body-medium-kerning": { + "$type": "dimension", + "$value": "{typography-kerning-none}" + }, + "body-medium-line-height": { + "$type": "dimension", + "$value": "{typography-line-height-line-height-s}" + }, + "body-medium-strikethrough-font-family": { + "$type": "fontFamily", + "$value": "{body-medium-font-family}" + }, + "body-medium-strikethrough-font-size": { + "$type": "dimension", + "$value": "{body-medium-font-size}" + }, + "body-medium-strikethrough-font-weight": { + "$type": "fontWeight", + "$value": "{typography-font-weight-regular}" + }, + "body-medium-strikethrough-kerning": { + "$type": "dimension", + "$value": "{typography-kerning-none}" + }, + "body-medium-strikethrough-line-height": { + "$type": "dimension", + "$value": "{body-medium-line-height}" + }, + "body-medium-strikethrough-text-style-name": { + "$type": "string", + "$value": "body-medium-strikethrough" + }, + "body-medium-text-style-name": { + "$type": "string", + "$value": "body-medium" + }, + "body-small-font-family": { + "$type": "fontFamily", + "$value": "{typography-font-family-primary}" + }, + "body-small-font-size": { + "$type": "dimension", + "$value": "{typography-font-size-font-size-xs}" + }, + "body-small-font-weight": { + "$type": "fontWeight", + "$value": "{typography-font-weight-regular}" + }, + "body-small-kerning": { + "$type": "dimension", + "$value": "{typography-kerning-none}" + }, + "body-small-line-height": { + "$type": "dimension", + "$value": "{typography-line-height-system-line-height-xxs}" + }, + "body-small-text-style-name": { + "$type": "string", + "$value": "body-small" + }, + "display-large-font-family": { + "$type": "fontFamily", + "$value": "{typography-font-family-brand}" + }, "display-large-font-size": { "$type": "dimension", "$value": "{typography-font-size-font-size-xl}" }, - "display-large-line-height": { - "$type": "dimension", - "$value": "{typography-line-height-line-height-xl}" + "display-large-font-weight": { + "$type": "fontWeight", + "$value": "{typography-font-weight-regular}" }, "display-large-kerning": { "$type": "dimension", "$value": "{typography-kerning-none}" }, + "display-large-line-height": { + "$type": "dimension", + "$value": "{typography-line-height-line-height-xl}" + }, + "display-large-text-style-name": { + "$type": "string", + "$value": "display-large" + }, "display-medium-font-family": { "$type": "fontFamily", "$value": "{typography-font-family-brand}" }, + "display-medium-font-size": { + "$type": "dimension", + "$value": "{typography-font-size-font-size-l}" + }, "display-medium-font-weight": { - "$type": "string", + "$type": "fontWeight", "$value": "{typography-font-weight-regular}" }, - "display-medium-font-size": { + "display-medium-kerning": { "$type": "dimension", - "$value": "{typography-font-size-font-size-l}" + "$value": "{typography-kerning-none}" }, "display-medium-line-height": { "$type": "dimension", "$value": "{typography-line-height-line-height-l}" }, - "display-medium-kerning": { - "$type": "dimension", - "$value": "{typography-kerning-none}" + "display-medium-text-style-name": { + "$type": "string", + "$value": "display-medium" }, "display-small-font-family": { "$type": "fontFamily", "$value": "{typography-font-family-brand}" }, + "display-small-font-size": { + "$type": "dimension", + "$value": "{typography-font-size-font-size-m}" + }, "display-small-font-weight": { - "$type": "string", + "$type": "fontWeight", "$value": "{typography-font-weight-regular}" }, - "display-small-font-size": { + "display-small-kerning": { "$type": "dimension", - "$value": "{typography-font-size-font-size-m}" + "$value": "{typography-kerning-none}" }, "display-small-line-height": { "$type": "dimension", "$value": "{typography-line-height-line-height-m}" }, - "display-small-kerning": { - "$type": "dimension", - "$value": "{typography-kerning-none}" + "display-small-text-style-name": { + "$type": "string", + "$value": "display-small" }, "heading-large-font-family": { "$type": "fontFamily", "$value": "{typography-font-family-primary}" }, + "heading-large-font-size": { + "$type": "dimension", + "$value": "{typography-font-size-font-size-xxl}" + }, "heading-large-font-weight": { - "$type": "string", + "$type": "fontWeight", "$value": "{typography-font-weight-medium}" }, - "heading-large-font-size": { + "heading-large-kerning": { "$type": "dimension", - "$value": "{typography-font-size-font-size-xxl}" + "$value": "{typography-kerning-tight}" }, "heading-large-line-height": { "$type": "dimension", "$value": "{typography-line-height-line-height-xl}" }, - "heading-large-kerning": { - "$type": "dimension", - "$value": "{typography-kerning-tight}" + "heading-large-text-style-name": { + "$type": "string", + "$value": "heading-large" }, "heading-medium-font-family": { "$type": "fontFamily", "$value": "{typography-font-family-primary}" }, + "heading-medium-font-size": { + "$type": "dimension", + "$value": "{typography-font-size-font-size-xl}" + }, "heading-medium-font-weight": { - "$type": "string", + "$type": "fontWeight", "$value": "{typography-font-weight-medium}" }, - "heading-medium-font-size": { + "heading-medium-kerning": { "$type": "dimension", - "$value": "{typography-font-size-font-size-xl}" + "$value": "{typography-kerning-tight}" }, "heading-medium-line-height": { "$type": "dimension", "$value": "{typography-line-height-line-height-l}" }, - "heading-medium-kerning": { - "$type": "dimension", - "$value": "{typography-kerning-tight}" + "heading-medium-text-style-name": { + "$type": "string", + "$value": "heading-medium" }, "heading-small-font-family": { "$type": "fontFamily", "$value": "{typography-font-family-primary}" }, - "heading-small-font-weight": { - "$type": "string", - "$value": "{typography-font-weight-medium}" - }, "heading-small-font-size": { "$type": "dimension", "$value": "{typography-font-size-font-size-l}" }, - "heading-small-line-height": { - "$type": "dimension", - "$value": "{typography-line-height-line-height-m}" + "heading-small-font-weight": { + "$type": "fontWeight", + "$value": "{typography-font-weight-medium}" }, "heading-small-kerning": { "$type": "dimension", "$value": "{typography-kerning-tight}" }, - "body-large-font-family": { - "$type": "fontFamily", - "$value": "{typography-font-family-primary}" - }, - "body-large-font-weight": { - "$type": "string", - "$value": "{typography-font-weight-regular}" - }, - "body-large-font-size": { - "$type": "dimension", - "$value": "{typography-font-size-font-size-m}" - }, - "body-large-line-height": { + "heading-small-line-height": { "$type": "dimension", - "$value": "{typography-line-height-system-line-height-m}" + "$value": "{typography-line-height-line-height-m}" }, - "body-large-kerning": { - "$type": "dimension", - "$value": "{typography-kerning-none}" + "heading-small-text-style-name": { + "$type": "string", + "$value": "heading-small" }, - "body-medium-font-family": { + "heading-x-small-font-family": { "$type": "fontFamily", "$value": "{typography-font-family-primary}" }, - "body-medium-font-weight": { - "$type": "string", - "$value": "{typography-font-weight-regular}" - }, - "body-medium-font-size": { + "heading-x-small-font-size": { "$type": "dimension", "$value": "{typography-font-size-font-size-s}" }, - "body-medium-line-height": { - "$type": "dimension", - "$value": "{typography-line-height-line-height-s}" + "heading-x-small-font-weight": { + "$type": "fontWeight", + "$value": "{typography-font-weight-medium}" }, - "body-medium-kerning": { + "heading-x-small-kerning": { "$type": "dimension", - "$value": "{typography-kerning-none}" + "$value": "{typography-kerning-tight}" }, - "body-medium-strikethrough-font-family": { - "$type": "fontFamily", - "$value": "{body-medium-font-family}" + "heading-x-small-line-height": { + "$type": "dimension", + "$value": "{typography-line-height-line-height-xs}" }, - "body-medium-strikethrough-font-weight": { + "heading-x-small-text-style-name": { "$type": "string", - "$value": "{typography-font-weight-regular}" + "$value": "heading-xsmall" }, - "body-medium-strikethrough-font-size": { + "label-small-bold-font-family": { + "$type": "fontFamily", + "$value": "{label-small-font-family}" + }, + "label-small-bold-font-size": { "$type": "dimension", - "$value": "{body-medium-font-size}" + "$value": "{label-small-font-size}" }, - "body-medium-strikethrough-line-height": { + "label-small-bold-font-weight": { + "$type": "fontWeight", + "$value": "{label-small-font-weight}" + }, + "label-small-bold-kerning": { "$type": "dimension", - "$value": "{body-medium-line-height}" + "$value": "{label-small-kerning}" }, - "body-medium-strikethrough-kerning": { + "label-small-bold-line-height": { "$type": "dimension", - "$value": "{typography-kerning-none}" + "$value": "{label-small-line-height}" }, - "body-small-font-family": { + "label-small-bold-text-style-name": { + "$type": "string", + "$value": "label-small-bold" + }, + "label-small-font-family": { "$type": "fontFamily", "$value": "{typography-font-family-primary}" }, - "body-small-font-weight": { - "$type": "string", + "label-small-font-size": { + "$type": "dimension", + "$value": "{typography-font-size-font-size-xs}" + }, + "label-small-font-weight": { + "$type": "fontWeight", "$value": "{typography-font-weight-regular}" }, - "body-small-font-size": { + "label-small-kerning": { "$type": "dimension", - "$value": "{typography-font-size-font-size-xs}" + "$value": "{typography-kerning-none}" }, - "body-small-line-height": { + "label-small-line-height": { "$type": "dimension", "$value": "{typography-line-height-system-line-height-xxs}" }, - "body-small-kerning": { - "$type": "dimension", - "$value": "{typography-kerning-none}" + "label-small-text-style-name": { + "$type": "string", + "$value": "label-small" }, "link-medium-font-family": { "$type": "fontFamily", "$value": "{body-medium-font-family}" }, + "link-medium-font-size": { + "$type": "dimension", + "$value": "{body-medium-font-size}" + }, "link-medium-font-weight": { - "$type": "string", + "$type": "fontWeight", "$value": "{typography-font-weight-medium}" }, - "link-medium-font-size": { + "link-medium-kerning": { "$type": "dimension", - "$value": "{body-medium-font-size}" + "$value": "{body-medium-kerning}" }, "link-medium-line-height": { "$type": "dimension", "$value": "{body-medium-line-height}" }, - "link-medium-kerning": { - "$type": "dimension", - "$value": "{body-medium-kerning}" + "link-medium-text-style-name": { + "$type": "string", + "$value": "link-medium" }, "link-small-font-family": { "$type": "fontFamily", "$value": "{body-small-font-family}" }, - "link-small-font-weight": { - "$type": "string", - "$value": "{typography-font-weight-medium}" - }, "link-small-font-size": { "$type": "dimension", "$value": "{body-small-font-size}" }, - "link-small-line-height": { - "$type": "dimension", - "$value": "{body-small-line-height}" + "link-small-font-weight": { + "$type": "fontWeight", + "$value": "{typography-font-weight-medium}" }, "link-small-kerning": { "$type": "dimension", "$value": "{body-small-kerning}" }, - "label-small-font-family": { - "$type": "fontFamily", - "$value": "{typography-font-family-primary}" - }, - "label-small-font-weight": { - "$type": "string", - "$value": "{typography-font-weight-regular}" - }, - "label-small-font-size": { - "$type": "dimension", - "$value": "{typography-font-size-font-size-xs}" - }, - "label-small-line-height": { - "$type": "dimension", - "$value": "{typography-line-height-system-line-height-xxs}" - }, - "label-small-kerning": { - "$type": "dimension", - "$value": "{typography-kerning-none}" - }, - "label-small-bold-font-family": { - "$type": "fontFamily", - "$value": "{label-small-font-family}" - }, - "label-small-bold-font-weight": { - "$type": "string", - "$value": "{label-small-font-weight}" - }, - "label-small-bold-font-size": { - "$type": "dimension", - "$value": "{label-small-font-size}" - }, - "label-small-bold-line-height": { - "$type": "dimension", - "$value": "{label-small-line-height}" - }, - "label-small-bold-kerning": { + "link-small-line-height": { "$type": "dimension", - "$value": "{label-small-kerning}" - }, - "heading-x-small-font-family": { - "$type": "fontFamily", - "$value": "{typography-font-family-primary}" + "$value": "{body-small-line-height}" }, - "heading-x-small-font-weight": { + "link-small-text-style-name": { "$type": "string", - "$value": "{typography-font-weight-medium}" - }, - "heading-x-small-font-size": { - "$type": "dimension", - "$value": "{typography-font-size-font-size-s}" - }, - "heading-x-small-line-height": { - "$type": "dimension", - "$value": "{typography-line-height-line-height-xs}" - }, - "heading-x-small-kerning": { - "$type": "dimension", - "$value": "{typography-kerning-tight}" + "$value": "link-small" } -} \ No newline at end of file +} diff --git a/designsystem/src/main/assets/design_tokens/typography.styles.tokens.json b/designsystem/src/main/assets/design_tokens/typography.styles.tokens.json index aa20d41..5c09f07 100644 --- a/designsystem/src/main/assets/design_tokens/typography.styles.tokens.json +++ b/designsystem/src/main/assets/design_tokens/typography.styles.tokens.json @@ -1,328 +1,152 @@ { - "display-large": { - "$type": "typography", - "$value": { - "fontFamily": "{display-large-font-family}", - "fontWeight": "Regular", - "fontSize": "{display-large-font-size}", - "lineHeight": "{display-large-line-height}", - "letterSpacing": "{display-large-kerning}" - } - }, - "display-medium": { - "$type": "typography", - "$value": { - "fontFamily": "{display-medium-font-family}", - "fontWeight": "Regular", - "fontSize": "{display-medium-font-size}", - "lineHeight": "{display-medium-line-height}", - "letterSpacing": "{display-medium-kerning}" - } - }, - "display-small": { - "$type": "typography", - "$value": { - "fontFamily": "{display-small-font-family}", - "fontWeight": "Regular", - "fontSize": "{display-small-font-size}", - "lineHeight": "{display-small-line-height}", - "letterSpacing": "{display-small-kerning}" - } - }, - "heading-large": { - "$type": "typography", - "$value": { - "fontFamily": "{heading-large-font-family}", - "fontWeight": "Medium", - "fontSize": "{heading-large-font-size}", - "lineHeight": "{heading-large-line-height}", - "letterSpacing": "{heading-large-kerning}" - } - }, - "heading-medium": { - "$type": "typography", - "$value": { - "fontFamily": "{heading-medium-font-family}", - "fontWeight": "Medium", - "fontSize": "{heading-medium-font-size}", - "lineHeight": "{heading-medium-line-height}", - "letterSpacing": "{heading-medium-kerning}" - } - }, - "heading-small": { - "$type": "typography", - "$value": { - "fontFamily": "{heading-small-font-family}", - "fontWeight": "Medium", - "fontSize": "{heading-small-font-size}", - "lineHeight": "{heading-small-line-height}", - "letterSpacing": "{heading-small-kerning}" - } - }, - "heading-x-small": { - "$type": "typography", - "$value": { - "fontFamily": "{heading-x-small-font-family}", - "fontWeight": "Medium", - "fontSize": "{heading-x-small-font-size}", - "lineHeight": "{heading-x-small-line-height}", - "letterSpacing": "{heading-x-small-kerning}" - } - }, "body-large": { "$type": "typography", "$value": { "fontFamily": "{body-large-font-family}", - "fontWeight": "Regular", "fontSize": "{body-large-font-size}", - "lineHeight": "{body-large-line-height}", - "letterSpacing": "{body-large-kerning}" + "fontWeight": "{body-large-font-weight}", + "letterSpacing": "{body-large-kerning}", + "lineHeight": "{body-large-line-height}" } }, "body-medium": { "$type": "typography", "$value": { "fontFamily": "{body-medium-font-family}", - "fontWeight": "Regular", "fontSize": "{body-medium-font-size}", - "lineHeight": "{body-medium-line-height}", - "letterSpacing": "{body-medium-kerning}" + "fontWeight": "{body-medium-font-weight}", + "letterSpacing": "{body-medium-kerning}", + "lineHeight": "{body-medium-line-height}" } }, "body-medium-strikethrough": { "$type": "typography", "$value": { "fontFamily": "{body-medium-strikethrough-font-family}", - "fontWeight": "Regular", "fontSize": "{body-medium-strikethrough-font-size}", - "lineHeight": "{body-medium-strikethrough-line-height}", - "letterSpacing": "{body-medium-strikethrough-kerning}" + "fontWeight": "{body-medium-strikethrough-font-weight}", + "letterSpacing": "{body-medium-strikethrough-kerning}", + "lineHeight": "{body-medium-strikethrough-line-height}" } }, "body-small": { "$type": "typography", "$value": { "fontFamily": "{body-small-font-family}", - "fontWeight": "Regular", "fontSize": "{body-small-font-size}", - "lineHeight": "{body-small-line-height}", - "letterSpacing": "{body-small-kerning}" - } - }, - "link-medium": { - "$type": "typography", - "$value": { - "fontFamily": "{link-medium-font-family}", - "fontWeight": "Medium", - "fontSize": "{link-medium-font-size}", - "lineHeight": "{link-medium-line-height}", - "letterSpacing": "{link-medium-kerning}" - } - }, - "link-small": { - "$type": "typography", - "$value": { - "fontFamily": "{link-small-font-family}", - "fontWeight": "Medium", - "fontSize": "{link-small-font-size}", - "lineHeight": "{link-small-line-height}", - "letterSpacing": "{link-small-kerning}" - } - }, - "label-small": { - "$type": "typography", - "$value": { - "fontFamily": "{label-small-font-family}", - "fontWeight": "Regular", - "fontSize": "{label-small-font-size}", - "lineHeight": "{label-small-line-height}", - "letterSpacing": "{label-small-kerning}" - } - }, - "label-small-bold": { - "$type": "typography", - "$value": { - "fontFamily": "{label-small-bold-font-family}", - "fontWeight": "Medium", - "fontSize": "{label-small-bold-font-size}", - "lineHeight": "{label-small-bold-line-height}", - "letterSpacing": "{label-small-bold-kerning}" + "fontWeight": "{body-small-font-weight}", + "letterSpacing": "{body-small-kerning}", + "lineHeight": "{body-small-line-height}" } }, - "~~doc-headings-large": { + "display-large": { "$type": "typography", "$value": { - "fontFamily": "{~~doc-text-primary}", - "fontWeight": "Regular", - "fontSize": { - "value": 48, - "unit": "px" - }, - "lineHeight": 56, - "letterSpacing": { - "value": 0, - "unit": "px" - } + "fontFamily": "{display-large-font-family}", + "fontSize": "{display-large-font-size}", + "fontWeight": "{display-large-font-weight}", + "letterSpacing": "{display-large-kerning}", + "lineHeight": "{display-large-line-height}" } }, - "~~doc-headings-medium": { + "display-medium": { "$type": "typography", "$value": { - "fontFamily": "{~~doc-text-primary}", - "fontWeight": "Regular", - "fontSize": { - "value": 32, - "unit": "px" - }, - "lineHeight": 40, - "letterSpacing": { - "value": 0, - "unit": "px" - } + "fontFamily": "{display-medium-font-family}", + "fontSize": "{display-medium-font-size}", + "fontWeight": "{display-medium-font-weight}", + "letterSpacing": "{display-medium-kerning}", + "lineHeight": "{display-medium-line-height}" } }, - "~~doc-headings-small": { + "display-small": { "$type": "typography", "$value": { - "fontFamily": "{~~doc-text-primary}", - "fontWeight": "Medium", - "fontSize": { - "value": 20, - "unit": "px" - }, - "lineHeight": 24, - "letterSpacing": { - "value": 0, - "unit": "px" - } + "fontFamily": "{display-small-font-family}", + "fontSize": "{display-small-font-size}", + "fontWeight": "{display-small-font-weight}", + "letterSpacing": "{display-small-kerning}", + "lineHeight": "{display-small-line-height}" } }, - "~~doc-body-large-bold": { + "heading-large": { "$type": "typography", "$value": { - "fontFamily": "{~~doc-text-primary}", - "fontWeight": "Medium", - "fontSize": { - "value": 20, - "unit": "px" - }, - "lineHeight": 28, - "letterSpacing": { - "value": 0, - "unit": "px" - } + "fontFamily": "{heading-large-font-family}", + "fontSize": "{heading-large-font-size}", + "fontWeight": "{heading-large-font-weight}", + "letterSpacing": "{heading-large-kerning}", + "lineHeight": "{heading-large-line-height}" } }, - "~~doc-body-large": { + "heading-medium": { "$type": "typography", "$value": { - "fontFamily": "{~~doc-text-primary}", - "fontWeight": "Regular", - "fontSize": { - "value": 20, - "unit": "px" - }, - "lineHeight": 28, - "letterSpacing": { - "value": 0, - "unit": "px" - } + "fontFamily": "{heading-medium-font-family}", + "fontSize": "{heading-medium-font-size}", + "fontWeight": "{heading-medium-font-weight}", + "letterSpacing": "{heading-medium-kerning}", + "lineHeight": "{heading-medium-line-height}" } }, - "~~doc-body-medium-bold": { + "heading-small": { "$type": "typography", "$value": { - "fontFamily": "{~~doc-text-primary}", - "fontWeight": "Medium", - "fontSize": { - "value": 16, - "unit": "px" - }, - "lineHeight": 24, - "letterSpacing": { - "value": 0, - "unit": "px" - } + "fontFamily": "{heading-small-font-family}", + "fontSize": "{heading-small-font-size}", + "fontWeight": "{heading-small-font-weight}", + "letterSpacing": "{heading-small-kerning}", + "lineHeight": "{heading-small-line-height}" } }, - "~~doc-body-medium": { + "heading-x-small": { "$type": "typography", "$value": { - "fontFamily": "{~~doc-text-primary}", - "fontWeight": "Regular", - "fontSize": { - "value": 16, - "unit": "px" - }, - "lineHeight": 24, - "letterSpacing": { - "value": 0, - "unit": "px" - } + "fontFamily": "{heading-x-small-font-family}", + "fontSize": "{heading-x-small-font-size}", + "fontWeight": "{heading-x-small-font-weight}", + "letterSpacing": "{heading-x-small-kerning}", + "lineHeight": "{heading-x-small-line-height}" } }, - "~~doc-body-small-bold": { + "label-small": { "$type": "typography", "$value": { - "fontFamily": "{~~doc-text-primary}", - "fontWeight": "Medium", - "fontSize": { - "value": 12, - "unit": "px" - }, - "lineHeight": 16, - "letterSpacing": { - "value": 0, - "unit": "px" - } + "fontFamily": "{label-small-font-family}", + "fontSize": "{label-small-font-size}", + "fontWeight": "{label-small-font-weight}", + "letterSpacing": "{label-small-kerning}", + "lineHeight": "{label-small-line-height}" } }, - "~~doc-body-small": { + "label-small-bold": { "$type": "typography", "$value": { - "fontFamily": "{~~doc-text-primary}", - "fontWeight": "Regular", - "fontSize": { - "value": 12, - "unit": "px" - }, - "lineHeight": 16, - "letterSpacing": { - "value": 0, - "unit": "px" - } + "fontFamily": "{label-small-bold-font-family}", + "fontSize": "{label-small-bold-font-size}", + "fontWeight": "{typography-font-weight-medium}", + "letterSpacing": "{label-small-bold-kerning}", + "lineHeight": "{label-small-bold-line-height}" } }, - "~~doc-body-x-small": { + "link-medium": { "$type": "typography", "$value": { - "fontFamily": "{~~doc-text-primary}", - "fontWeight": "Regular", - "fontSize": { - "value": 8, - "unit": "px" - }, - "lineHeight": 12, - "letterSpacing": { - "value": 0, - "unit": "px" - } + "fontFamily": "{link-medium-font-family}", + "fontSize": "{link-medium-font-size}", + "fontWeight": "{link-medium-font-weight}", + "letterSpacing": "{link-medium-kerning}", + "lineHeight": "{link-medium-line-height}" } }, - "~~doc-others-token": { + "link-small": { "$type": "typography", "$value": { - "fontFamily": "{~~doc-text-secondary}", - "fontWeight": "Medium", - "fontSize": { - "value": 12, - "unit": "px" - }, - "lineHeight": 16, - "letterSpacing": { - "value": 0, - "unit": "px" - } + "fontFamily": "{link-small-font-family}", + "fontSize": "{link-small-font-size}", + "fontWeight": "{link-small-font-weight}", + "letterSpacing": "{link-small-kerning}", + "lineHeight": "{link-small-line-height}" } } -} \ No newline at end of file +} diff --git a/designsystem/src/main/java/com/mindera/alfie/designsystem/tokens/Colors.kt b/designsystem/src/main/java/com/mindera/alfie/designsystem/tokens/Colors.kt index 93cd00e..10a3ac0 100644 --- a/designsystem/src/main/java/com/mindera/alfie/designsystem/tokens/Colors.kt +++ b/designsystem/src/main/java/com/mindera/alfie/designsystem/tokens/Colors.kt @@ -42,18 +42,34 @@ interface ColorContent { @Immutable interface ColorBorder { + val medium: Color val soft: Color } @Immutable interface ColorButton { val destructiveBackgroundDestructiveDefault: Color + val destructiveBackgroundDestructiveDisabled: Color + val destructiveContentDestructiveDefault: Color + val destructiveContentDestructiveDisabled: Color val destructiveStrokeDestructiveDefault: Color + val destructiveStrokeDestructiveDisabled: Color val primaryBackgroundPrimaryDefault: Color + val primaryBackgroundPrimaryDisabled: Color + val primaryContentPrimaryDefault: Color + val primaryContentPrimaryDisabled: Color + val primaryStrokePrimaryDefault: Color + val primaryStrokePrimaryDisabled: Color val secondaryBackgroundSecondaryDefault: Color val secondaryBackgroundSecondaryDisabled: Color + val secondaryContentSecondaryDefault: Color + val secondaryContentSecondaryDisabled: Color + val secondaryStrokeSecondaryDefault: Color + val secondaryStrokeSecondaryDisabled: Color val terciaryBackgroundTerciaryDefault: Color val terciaryBackgroundTerciaryDisabled: Color + val terciaryContentTerciaryDefault: Color + val terciaryContentTerciaryDisabled: Color val terciaryStrokeTerciaryDefault: Color val terciaryStrokeTerciaryDisabled: Color } @@ -90,16 +106,32 @@ class DefaultColors(private val primitive: Primitives) : Colors { override val contentTerciary = primitive.colors.neutrals500 } override val border = object : ColorBorder { + override val medium = primitive.colors.neutrals400 override val soft = primitive.colors.neutrals200 } override val button = object : ColorButton { override val destructiveBackgroundDestructiveDefault = surface.backgroundDestructive + override val destructiveBackgroundDestructiveDisabled = primitive.colors.neutrals300 + override val destructiveContentDestructiveDefault = primitive.colors.neutrals0 + override val destructiveContentDestructiveDisabled = primitive.colors.neutrals500 override val destructiveStrokeDestructiveDefault = surface.backgroundDestructive + override val destructiveStrokeDestructiveDisabled = primitive.colors.neutrals300 override val primaryBackgroundPrimaryDefault = surface.backgroundInvertedPrimary + override val primaryBackgroundPrimaryDisabled = primitive.colors.neutrals300 + override val primaryContentPrimaryDefault = primitive.colors.neutrals0 + override val primaryContentPrimaryDisabled = primitive.colors.neutrals500 + override val primaryStrokePrimaryDefault = primitive.colors.neutrals800 + override val primaryStrokePrimaryDisabled = primitive.colors.neutrals300 override val secondaryBackgroundSecondaryDefault = primitive.colors.transparent override val secondaryBackgroundSecondaryDisabled = primitive.colors.transparent + override val secondaryContentSecondaryDefault = primitive.colors.neutrals800 + override val secondaryContentSecondaryDisabled = primitive.colors.neutrals500 + override val secondaryStrokeSecondaryDefault = primitive.colors.neutrals900 + override val secondaryStrokeSecondaryDisabled = primitive.colors.neutrals500 override val terciaryBackgroundTerciaryDefault = primitive.colors.transparent override val terciaryBackgroundTerciaryDisabled = primitive.colors.transparent + override val terciaryContentTerciaryDefault = primitive.colors.neutrals800 + override val terciaryContentTerciaryDisabled = primitive.colors.neutrals500 override val terciaryStrokeTerciaryDefault = primitive.colors.transparent override val terciaryStrokeTerciaryDisabled = primitive.colors.transparent } diff --git a/scripts/generate_tokens/generate_design_tokens.py b/scripts/generate_tokens/generate_design_tokens.py index eadb1b2..5a3b466 100644 --- a/scripts/generate_tokens/generate_design_tokens.py +++ b/scripts/generate_tokens/generate_design_tokens.py @@ -114,6 +114,46 @@ def font_weight_to_kotlin(w): return FONT_WEIGHT_MAP.get(w, "FontWeight.Normal") +# Weight-name tokens (typography-font-weight-) are intentionally value-less +# (they only appear in .broken-ref-allowlist.json); the weight is taken from the +# token name suffix. typography.styles now expresses fontWeight as a {ref} instead +# of a literal weight name, so we follow the ref chain to recover the named weight. +_FONT_WEIGHT_PREFIX = "typography-font-weight-" +_WEIGHT_WORD_TO_NAME = { + "thin": "Thin", "extralight": "ExtraLight", "light": "Light", + "regular": "Regular", "medium": "Medium", "semibold": "SemiBold", + "bold": "Bold", "extrabold": "ExtraBold", "black": "Black", +} + + +def resolve_font_weight(raw, typo_tokens, visited=None): + """Resolve a style's fontWeight (literal name OR {ref}) → a named weight. + + Follows references through the typography tokens until a + 'typography-font-weight-' token is reached; the weight is derived from + . Falls back to 'Regular' for legacy literals that aren't recognised or + for unresolvable refs. + """ + if not isinstance(raw, str): + return "Regular" + m = REF_RE.match(raw) + if not m: + # Legacy literal, e.g. "Regular"; normalise to a known name, else Regular. + return _WEIGHT_WORD_TO_NAME.get(raw.replace(" ", "").lower(), "Regular") + target = m.group(1) + if visited is None: + visited = set() + if target in visited: + return "Regular" + visited.add(target) + if target.startswith(_FONT_WEIGHT_PREFIX): + word = target[len(_FONT_WEIGHT_PREFIX):].replace("-", "").lower() + return _WEIGHT_WORD_TO_NAME.get(word, "Regular") + if target in typo_tokens: + return resolve_font_weight(typo_tokens[target]["$value"], typo_tokens, visited) + return "Regular" + + # Numeric rank per named weight — orders Font(...) entries and matches the # weight suffix used in the static TTF filenames (e.g. Roboto-Medium.ttf). _WEIGHT_RANK = { @@ -158,7 +198,9 @@ def discover_typography_fonts(styles_raw, typo_tokens, reg, walk, primitives, na font_name = primitives[prim_token]["$value"] if not isinstance(font_name, str): continue - weight_str = style_obj.get("$value", {}).get("fontWeight", "Regular") + weight_str = resolve_font_weight( + style_obj.get("$value", {}).get("fontWeight", "Regular"), typo_tokens + ) info = usage.setdefault(prim_token, { "font_name": font_name, "folder": font_name.replace(" ", "_"), @@ -877,7 +919,7 @@ def emit_typography_tokens(typo_tokens, reg, walk): _TYPOGRAPHY_GROUP_ORDER = ["display", "heading", "body", "link", "label"] -def emit_typography(styles_raw, reg, walk): +def emit_typography(styles_raw, typo_tokens, reg, walk): lines = [ GEN_HEADER, "@file:Suppress(\"MagicNumber\", \"LongMethod\")\n", @@ -927,7 +969,9 @@ def emit_typography(styles_raw, reg, walk): if raw is None: print(f" WARNING: style '{style_name}' not found in styles file", file=sys.stderr) continue - weight_str = raw["$value"].get("fontWeight", "Regular") + weight_str = resolve_font_weight( + raw["$value"].get("fontWeight", "Regular"), typo_tokens + ) weight_kt = font_weight_to_kotlin(weight_str) lines.append(f" override val {member}: TextStyle =\n") @@ -1012,7 +1056,7 @@ def main(): print(" ✓ TypographyTokens.kt") (OUT_DIR / "Typography.kt").write_text( - emit_typography(styles_raw, reg, walk), encoding="utf-8" + emit_typography(styles_raw, typo_tokens, reg, walk), encoding="utf-8" ) print(" ✓ Typography.kt")