diff --git a/Alfie/AlfieKit/Sources/SharedUI/DesignTokens/.broken-ref-allowlist.json b/Alfie/AlfieKit/Sources/SharedUI/DesignTokens/.broken-ref-allowlist.json index b273e5bd..4473dcef 100644 --- a/Alfie/AlfieKit/Sources/SharedUI/DesignTokens/.broken-ref-allowlist.json +++ b/Alfie/AlfieKit/Sources/SharedUI/DesignTokens/.broken-ref-allowlist.json @@ -1,7 +1,4 @@ { - "missingTargets": [ - "typography-font-weight-regular", - "typography-font-weight-medium" - ], - "fix_strategy": "Define in .primitives.alfie-theme.tokens.json (regular: 400, medium: 500). Remove entries when fix lands." + "missingTargets": [], + "fix_strategy": "Resolved: the in-house figma-plugin/ exporter includes FONT_STYLE-scoped primitives that the third-party Design Token Exporter plugin filtered out, so typography-font-weight-regular/medium are no longer missing." } diff --git a/Alfie/AlfieKit/Sources/SharedUI/DesignTokens/.primitives.alfie-theme.tokens.json b/Alfie/AlfieKit/Sources/SharedUI/DesignTokens/.primitives.alfie-theme.tokens.json index 1a908c1a..07c5acfa 100644 --- a/Alfie/AlfieKit/Sources/SharedUI/DesignTokens/.primitives.alfie-theme.tokens.json +++ b/Alfie/AlfieKit/Sources/SharedUI/DesignTokens/.primitives.alfie-theme.tokens.json @@ -1,401 +1,166 @@ { - "spacing-spacing-0": { - "$type": "dimension", - "$value": { - "value": 0, - "unit": "px" - } - }, - "spacing-spacing-2": { - "$type": "dimension", - "$value": { - "value": 2, - "unit": "px" - } - }, - "spacing-spacing-4": { - "$type": "dimension", - "$value": { - "value": 4, - "unit": "px" - } - }, - "spacing-spacing-8": { - "$type": "dimension", - "$value": { - "value": 8, - "unit": "px" - } - }, - "spacing-spacing-12": { - "$type": "dimension", - "$value": { - "value": 12, - "unit": "px" - } - }, - "spacing-spacing-14": { - "$type": "dimension", - "$value": { - "value": 14, - "unit": "px" - } - }, - "spacing-spacing-16": { - "$type": "dimension", - "$value": { - "value": 16, - "unit": "px" - } - }, - "spacing-spacing-18": { - "$type": "dimension", - "$value": { - "value": 18, - "unit": "px" - } - }, - "spacing-spacing-20": { - "$type": "dimension", - "$value": { - "value": 20, - "unit": "px" - } - }, - "spacing-spacing-24": { - "$type": "dimension", - "$value": { - "value": 24, - "unit": "px" - } - }, - "spacing-spacing-28": { - "$type": "dimension", - "$value": { - "value": 28, - "unit": "px" - } - }, - "spacing-spacing-32": { - "$type": "dimension", - "$value": { - "value": 32, - "unit": "px" - } - }, - "spacing-spacing-40": { - "$type": "dimension", - "$value": { - "value": 40, - "unit": "px" - } - }, - "spacing-spacing-48": { - "$type": "dimension", - "$value": { - "value": 48, - "unit": "px" - } - }, - "spacing-spacing-56": { - "$type": "dimension", - "$value": { - "value": 56, - "unit": "px" - } - }, - "spacing-spacing-64": { - "$type": "dimension", - "$value": { - "value": 64, - "unit": "px" - } - }, - "spacing-spacing-80": { - "$type": "dimension", - "$value": { - "value": 80, - "unit": "px" - } - }, - "spacing-spacing-96": { - "$type": "dimension", - "$value": { - "value": 96, - "unit": "px" - } - }, - "spacing-spacing-124": { - "$type": "dimension", - "$value": { - "value": 124, - "unit": "px" - } + "border-border-style-solid": { + "$type": "string", + "$value": "solid" }, - "spacing-spacing-220": { - "$type": "dimension", - "$value": { - "value": 220, - "unit": "px" - } - }, - "typography-font-family-brand": { - "$type": "fontFamily", - "$value": "Libre Baskerville" - }, - "typography-font-family-primary-web": { - "$type": "fontFamily", - "$value": "Inter" - }, - "typography-font-family-primary-android": { - "$type": "fontFamily", - "$value": "Roboto" - }, - "typography-font-family-primary-ios": { - "$type": "fontFamily", - "$value": "SF Pro" - }, - "typography-font-size-font-size-12": { - "$type": "dimension", - "$value": "{spacing-spacing-12}" - }, - "typography-font-size-font-size-14": { - "$type": "dimension", - "$value": "{spacing-spacing-14}" - }, - "typography-font-size-font-size-16": { - "$type": "dimension", - "$value": "{spacing-spacing-16}" - }, - "typography-font-size-font-size-18": { - "$type": "dimension", - "$value": "{spacing-spacing-18}" - }, - "typography-font-size-font-size-20": { - "$type": "dimension", - "$value": "{spacing-spacing-20}" - }, - "typography-font-size-font-size-24": { - "$type": "dimension", - "$value": "{spacing-spacing-24}" - }, - "typography-font-size-font-size-32": { - "$type": "dimension", - "$value": "{spacing-spacing-32}" - }, - "typography-font-size-font-size-40": { - "$type": "dimension", - "$value": "{spacing-spacing-40}" - }, - "typography-font-size-font-size-48": { - "$type": "dimension", - "$value": "{spacing-spacing-48}" - }, - "typography-font-size-font-size-56": { - "$type": "dimension", - "$value": "{spacing-spacing-56}" - }, - "typography-line-height-line-height-16": { - "$type": "dimension", - "$value": "{spacing-spacing-16}" - }, - "typography-line-height-line-height-20": { - "$type": "dimension", - "$value": "{spacing-spacing-20}" - }, - "typography-line-height-line-height-24": { - "$type": "dimension", - "$value": "{spacing-spacing-24}" - }, - "typography-line-height-line-height-28": { - "$type": "dimension", - "$value": "{spacing-spacing-28}" - }, - "typography-line-height-line-height-32": { - "$type": "dimension", - "$value": "{spacing-spacing-32}" - }, - "typography-line-height-line-height-40": { - "$type": "dimension", - "$value": "{spacing-spacing-40}" - }, - "typography-line-height-line-height-48": { - "$type": "dimension", - "$value": "{spacing-spacing-48}" - }, - "typography-kerning-tight": { - "$type": "dimension", - "$value": { - "value": -0.5, - "unit": "px" - } - }, - "typography-kerning-none": { - "$type": "dimension", - "$value": { - "value": 0, - "unit": "px" - } - }, - "typography-kerning-spacious": { + "border-border-weight-default": { "$type": "dimension", "$value": { - "value": 1, - "unit": "px" + "unit": "px", + "value": 1 } }, - "colours-neutrals-900": { + "colours-neutrals-0": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ - 0.0235294122248888, - 0.0313725508749485, - 0.03921568766236305 + 1, + 1, + 1 ] } }, - "colours-neutrals-800": { + "colours-neutrals-100": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ - 0.06666667014360428, - 0.06666667014360428, - 0.06666667014360428 + 0.97, + 0.97, + 0.97 ] } }, - "colours-neutrals-700": { + "colours-neutrals-200": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ - 0.16862745583057404, - 0.16862745583057404, - 0.16862745583057404 + 0.913725, + 0.913725, + 0.913725 ] } }, - "colours-neutrals-600": { + "colours-neutrals-300": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ - 0.29019609093666077, - 0.29019609093666077, - 0.29019609093666077 + 0.803922, + 0.803922, + 0.803922 ] } }, - "colours-neutrals-500": { + "colours-neutrals-400": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ - 0.4627451002597809, - 0.4627451002597809, - 0.4627451002597809 + 0.63, + 0.63, + 0.63 ] } }, - "colours-neutrals-400": { + "colours-neutrals-500": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ - 0.6299999952316284, - 0.6299999952316284, - 0.6299999952316284 + 0.462745, + 0.462745, + 0.462745 ] } }, - "colours-neutrals-300": { + "colours-neutrals-600": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ - 0.8039215803146362, - 0.8039215803146362, - 0.8039215803146362 + 0.290196, + 0.290196, + 0.290196 ] } }, - "colours-neutrals-200": { + "colours-neutrals-700": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ - 0.9137254953384399, - 0.9137254953384399, - 0.9137254953384399 + 0.168627, + 0.168627, + 0.168627 ] } }, - "colours-neutrals-100": { + "colours-neutrals-800": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ - 0.9700000286102295, - 0.9700000286102295, - 0.9700000286102295 + 0.066667, + 0.066667, + 0.066667 ] } }, - "colours-neutrals-0": { + "colours-neutrals-900": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ - 1, - 1, - 1 + 0.023529, + 0.031373, + 0.039216 ] } }, - "colours-transparent-transparent": { + "colours-semantic-error-100": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ - 1, - 1, - 1 - ], - "alpha": 0 + 0.996078, + 0.94902, + 0.945098 + ] } }, - "colours-semantic-error-800": { + "colours-semantic-error-200": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ - 0.468505859375, - 0.02152746543288231, - 0.00003812710565398447 + 0.976471, + 0.870588, + 0.862745 ] } }, - "colours-semantic-error-700": { + "colours-semantic-error-300": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ - 0.583789050579071, - 0.14404691755771637, - 0.14404691755771637 + 0.917647, + 0.607843, + 0.619608 ] } }, - "colours-semantic-error-600": { + "colours-semantic-error-400": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ - 0.6986979246139526, - 0.14689259231090546, - 0.14689259231090546 + 0.92, + 0.4048, + 0.425686 ] } }, @@ -404,86 +169,86 @@ "$value": { "colorSpace": "srgb", "components": [ - 0.8784313797950745, - 0.24313725531101227, - 0.250980406999588 + 0.878431, + 0.243137, + 0.25098 ] } }, - "colours-semantic-error-400": { + "colours-semantic-error-600": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ - 0.9200000166893005, - 0.4047999978065491, - 0.42568641901016235 + 0.698698, + 0.146893, + 0.146893 ] } }, - "colours-semantic-error-300": { + "colours-semantic-error-700": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ - 0.9176470637321472, - 0.6078431606292725, - 0.6196078658103943 + 0.583789, + 0.144047, + 0.144047 ] } }, - "colours-semantic-error-200": { + "colours-semantic-error-800": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ - 0.9764705896377563, - 0.8705882430076599, - 0.8627451062202454 + 0.468506, + 0.021527, + 0.000038 ] } }, - "colours-semantic-error-100": { + "colours-semantic-success-100": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ - 0.9960784316062927, - 0.9490196108818054, - 0.9450980424880981 + 0.929412, + 0.968627, + 0.905882 ] } }, - "colours-semantic-success-800": { + "colours-semantic-success-200": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ - 0, - 0.3843137323856354, - 0.003921568859368563 + 0.831373, + 0.917647, + 0.764706 ] } }, - "colours-semantic-success-700": { + "colours-semantic-success-300": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ - 0.21176470816135406, - 0.5137255191802979, - 0.08627451211214066 + 0.640604, + 0.81, + 0.5103 ] } }, - "colours-semantic-success-600": { + "colours-semantic-success-400": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ - 0.2831125855445862, - 0.5699999928474426, - 0.12079471349716187 + 0.517647, + 0.772549, + 0.32549 ] } }, @@ -492,58 +257,308 @@ "$value": { "colorSpace": "srgb", "components": [ - 0.37514281272888184, - 0.6499999761581421, - 0.1671428382396698 + 0.375143, + 0.65, + 0.167143 ] } }, - "colours-semantic-success-400": { + "colours-semantic-success-600": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ - 0.5176470875740051, - 0.772549033164978, - 0.32549020648002625 + 0.283113, + 0.57, + 0.120795 ] } }, - "colours-semantic-success-300": { + "colours-semantic-success-700": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ - 0.6406044363975525, - 0.8100000023841858, - 0.5102999806404114 + 0.211765, + 0.513726, + 0.086275 ] } }, - "colours-semantic-success-200": { + "colours-semantic-success-800": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ - 0.8313725590705872, - 0.9176470637321472, - 0.7647058963775635 + 0, + 0.384314, + 0.003922 ] } }, - "colours-semantic-success-100": { + "colours-transparent-transparent": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ - 0.929411768913269, - 0.9686274528503418, - 0.9058823585510254 + 1, + 1, + 1, + 0 ] } }, - "border-border-weight-default": { + "spacing-spacing-0": { + "$type": "dimension", + "$value": { + "unit": "px", + "value": 0 + } + }, + "spacing-spacing-12": { + "$type": "dimension", + "$value": { + "unit": "px", + "value": 12 + } + }, + "spacing-spacing-124": { + "$type": "dimension", + "$value": { + "unit": "px", + "value": 124 + } + }, + "spacing-spacing-14": { + "$type": "dimension", + "$value": { + "unit": "px", + "value": 14 + } + }, + "spacing-spacing-16": { + "$type": "dimension", + "$value": { + "unit": "px", + "value": 16 + } + }, + "spacing-spacing-18": { + "$type": "dimension", + "$value": { + "unit": "px", + "value": 18 + } + }, + "spacing-spacing-2": { + "$type": "dimension", + "$value": { + "unit": "px", + "value": 2 + } + }, + "spacing-spacing-20": { + "$type": "dimension", + "$value": { + "unit": "px", + "value": 20 + } + }, + "spacing-spacing-220": { + "$type": "dimension", + "$value": { + "unit": "px", + "value": 220 + } + }, + "spacing-spacing-24": { + "$type": "dimension", + "$value": { + "unit": "px", + "value": 24 + } + }, + "spacing-spacing-28": { + "$type": "dimension", + "$value": { + "unit": "px", + "value": 28 + } + }, + "spacing-spacing-32": { + "$type": "dimension", + "$value": { + "unit": "px", + "value": 32 + } + }, + "spacing-spacing-4": { + "$type": "dimension", + "$value": { + "unit": "px", + "value": 4 + } + }, + "spacing-spacing-40": { + "$type": "dimension", + "$value": { + "unit": "px", + "value": 40 + } + }, + "spacing-spacing-48": { + "$type": "dimension", + "$value": { + "unit": "px", + "value": 48 + } + }, + "spacing-spacing-56": { + "$type": "dimension", + "$value": { + "unit": "px", + "value": 56 + } + }, + "spacing-spacing-64": { + "$type": "dimension", + "$value": { + "unit": "px", + "value": 64 + } + }, + "spacing-spacing-8": { + "$type": "dimension", + "$value": { + "unit": "px", + "value": 8 + } + }, + "spacing-spacing-80": { + "$type": "dimension", + "$value": { + "unit": "px", + "value": 80 + } + }, + "spacing-spacing-96": { + "$type": "dimension", + "$value": { + "unit": "px", + "value": 96 + } + }, + "typography-font-family-brand": { + "$type": "fontFamily", + "$value": "Libre Baskerville" + }, + "typography-font-family-primary-android": { + "$type": "fontFamily", + "$value": "Roboto" + }, + "typography-font-family-primary-ios": { + "$type": "fontFamily", + "$value": "SF Pro" + }, + "typography-font-family-primary-web": { + "$type": "fontFamily", + "$value": "Inter" + }, + "typography-font-size-font-size-12": { + "$type": "dimension", + "$value": "{spacing-spacing-12}" + }, + "typography-font-size-font-size-14": { + "$type": "dimension", + "$value": "{spacing-spacing-14}" + }, + "typography-font-size-font-size-16": { + "$type": "dimension", + "$value": "{spacing-spacing-16}" + }, + "typography-font-size-font-size-18": { + "$type": "dimension", + "$value": "{spacing-spacing-18}" + }, + "typography-font-size-font-size-20": { + "$type": "dimension", + "$value": "{spacing-spacing-20}" + }, + "typography-font-size-font-size-24": { + "$type": "dimension", + "$value": "{spacing-spacing-24}" + }, + "typography-font-size-font-size-32": { + "$type": "dimension", + "$value": "{spacing-spacing-32}" + }, + "typography-font-size-font-size-40": { + "$type": "dimension", + "$value": "{spacing-spacing-40}" + }, + "typography-font-size-font-size-48": { + "$type": "dimension", + "$value": "{spacing-spacing-48}" + }, + "typography-font-size-font-size-56": { + "$type": "dimension", + "$value": "{spacing-spacing-56}" + }, + "typography-font-weight-medium": { "$type": "fontWeight", - "$value": 1 + "$value": "Medium" + }, + "typography-font-weight-regular": { + "$type": "fontWeight", + "$value": "Regular" + }, + "typography-kerning-none": { + "$type": "dimension", + "$value": { + "unit": "px", + "value": 0 + } + }, + "typography-kerning-spacious": { + "$type": "dimension", + "$value": { + "unit": "px", + "value": 1 + } + }, + "typography-kerning-tight": { + "$type": "dimension", + "$value": { + "unit": "px", + "value": -0.5 + } + }, + "typography-line-height-line-height-16": { + "$type": "dimension", + "$value": "{spacing-spacing-16}" + }, + "typography-line-height-line-height-20": { + "$type": "dimension", + "$value": "{spacing-spacing-20}" + }, + "typography-line-height-line-height-24": { + "$type": "dimension", + "$value": "{spacing-spacing-24}" + }, + "typography-line-height-line-height-28": { + "$type": "dimension", + "$value": "{spacing-spacing-28}" + }, + "typography-line-height-line-height-32": { + "$type": "dimension", + "$value": "{spacing-spacing-32}" + }, + "typography-line-height-line-height-40": { + "$type": "dimension", + "$value": "{spacing-spacing-40}" + }, + "typography-line-height-line-height-48": { + "$type": "dimension", + "$value": "{spacing-spacing-48}" } -} \ No newline at end of file +} diff --git a/Alfie/AlfieKit/Sources/SharedUI/DesignTokens/manifest.json b/Alfie/AlfieKit/Sources/SharedUI/DesignTokens/manifest.json index 68cc3056..92e632c6 100644 --- a/Alfie/AlfieKit/Sources/SharedUI/DesignTokens/manifest.json +++ b/Alfie/AlfieKit/Sources/SharedUI/DesignTokens/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/Alfie/AlfieKit/Sources/SharedUI/DesignTokens/screen-size.small-(s).tokens.json b/Alfie/AlfieKit/Sources/SharedUI/DesignTokens/screen-size.small-(s).tokens.json index ac33b7d3..38a9237e 100644 --- a/Alfie/AlfieKit/Sources/SharedUI/DesignTokens/screen-size.small-(s).tokens.json +++ b/Alfie/AlfieKit/Sources/SharedUI/DesignTokens/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/Alfie/AlfieKit/Sources/SharedUI/DesignTokens/sizing.alfie-theme.tokens.json b/Alfie/AlfieKit/Sources/SharedUI/DesignTokens/sizing.alfie-theme.tokens.json index 25a93895..826cf979 100644 --- a/Alfie/AlfieKit/Sources/SharedUI/DesignTokens/sizing.alfie-theme.tokens.json +++ b/Alfie/AlfieKit/Sources/SharedUI/DesignTokens/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/Alfie/AlfieKit/Sources/SharedUI/DesignTokens/system.ios.tokens.json b/Alfie/AlfieKit/Sources/SharedUI/DesignTokens/system.ios.tokens.json index f23b6a07..64ea1f28 100644 --- a/Alfie/AlfieKit/Sources/SharedUI/DesignTokens/system.ios.tokens.json +++ b/Alfie/AlfieKit/Sources/SharedUI/DesignTokens/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/Alfie/AlfieKit/Sources/SharedUI/DesignTokens/theme.alfie-theme.tokens.json b/Alfie/AlfieKit/Sources/SharedUI/DesignTokens/theme.alfie-theme.tokens.json index 5af3bf06..68d5de23 100644 --- a/Alfie/AlfieKit/Sources/SharedUI/DesignTokens/theme.alfie-theme.tokens.json +++ b/Alfie/AlfieKit/Sources/SharedUI/DesignTokens/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/Alfie/AlfieKit/Sources/SharedUI/DesignTokens/typography.alfie-theme.tokens.json b/Alfie/AlfieKit/Sources/SharedUI/DesignTokens/typography.alfie-theme.tokens.json index cea2b3f1..5daffa0f 100644 --- a/Alfie/AlfieKit/Sources/SharedUI/DesignTokens/typography.alfie-theme.tokens.json +++ b/Alfie/AlfieKit/Sources/SharedUI/DesignTokens/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/Alfie/AlfieKit/Sources/SharedUI/DesignTokens/typography.styles.tokens.json b/Alfie/AlfieKit/Sources/SharedUI/DesignTokens/typography.styles.tokens.json index aa20d419..5c09f07f 100644 --- a/Alfie/AlfieKit/Sources/SharedUI/DesignTokens/typography.styles.tokens.json +++ b/Alfie/AlfieKit/Sources/SharedUI/DesignTokens/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/Alfie/AlfieKit/Sources/SharedUI/GeneratedTokens/Primitives+Generated.swift b/Alfie/AlfieKit/Sources/SharedUI/GeneratedTokens/Primitives+Generated.swift index 2a5420cd..caccb5da 100644 --- a/Alfie/AlfieKit/Sources/SharedUI/GeneratedTokens/Primitives+Generated.swift +++ b/Alfie/AlfieKit/Sources/SharedUI/GeneratedTokens/Primitives+Generated.swift @@ -5,35 +5,36 @@ import SwiftUI public enum Primitives { public enum Border { - public static let borderWeightDefault: Int = 1 + public static let borderStyleSolid: String = "solid" + public static let borderWeightDefault: CGFloat = CGFloat(1.0) } public enum Colours { public static let neutrals0 = Color(.sRGB, red: 1.0, green: 1.0, blue: 1.0, opacity: 1.0) - public static let neutrals100 = Color(.sRGB, red: 0.9700000286102295, green: 0.9700000286102295, blue: 0.9700000286102295, opacity: 1.0) - public static let neutrals200 = Color(.sRGB, red: 0.9137254953384399, green: 0.9137254953384399, blue: 0.9137254953384399, opacity: 1.0) - public static let neutrals300 = Color(.sRGB, red: 0.8039215803146362, green: 0.8039215803146362, blue: 0.8039215803146362, opacity: 1.0) - public static let neutrals400 = Color(.sRGB, red: 0.6299999952316284, green: 0.6299999952316284, blue: 0.6299999952316284, opacity: 1.0) - public static let neutrals500 = Color(.sRGB, red: 0.4627451002597809, green: 0.4627451002597809, blue: 0.4627451002597809, opacity: 1.0) - public static let neutrals600 = Color(.sRGB, red: 0.29019609093666077, green: 0.29019609093666077, blue: 0.29019609093666077, opacity: 1.0) - public static let neutrals700 = Color(.sRGB, red: 0.16862745583057404, green: 0.16862745583057404, blue: 0.16862745583057404, opacity: 1.0) - public static let neutrals800 = Color(.sRGB, red: 0.06666667014360428, green: 0.06666667014360428, blue: 0.06666667014360428, opacity: 1.0) - public static let neutrals900 = Color(.sRGB, red: 0.0235294122248888, green: 0.0313725508749485, blue: 0.03921568766236305, opacity: 1.0) - public static let semanticError100 = Color(.sRGB, red: 0.9960784316062927, green: 0.9490196108818054, blue: 0.9450980424880981, opacity: 1.0) - public static let semanticError200 = Color(.sRGB, red: 0.9764705896377563, green: 0.8705882430076599, blue: 0.8627451062202454, opacity: 1.0) - public static let semanticError300 = Color(.sRGB, red: 0.9176470637321472, green: 0.6078431606292725, blue: 0.6196078658103943, opacity: 1.0) - public static let semanticError400 = Color(.sRGB, red: 0.9200000166893005, green: 0.4047999978065491, blue: 0.42568641901016235, opacity: 1.0) - public static let semanticError500 = Color(.sRGB, red: 0.8784313797950745, green: 0.24313725531101227, blue: 0.250980406999588, opacity: 1.0) - public static let semanticError600 = Color(.sRGB, red: 0.6986979246139526, green: 0.14689259231090546, blue: 0.14689259231090546, opacity: 1.0) - public static let semanticError700 = Color(.sRGB, red: 0.583789050579071, green: 0.14404691755771637, blue: 0.14404691755771637, opacity: 1.0) - public static let semanticError800 = Color(.sRGB, red: 0.468505859375, green: 0.02152746543288231, blue: 3.812710565398446e-05, opacity: 1.0) - public static let semanticSuccess100 = Color(.sRGB, red: 0.929411768913269, green: 0.9686274528503418, blue: 0.9058823585510254, opacity: 1.0) - public static let semanticSuccess200 = Color(.sRGB, red: 0.8313725590705872, green: 0.9176470637321472, blue: 0.7647058963775635, opacity: 1.0) - public static let semanticSuccess300 = Color(.sRGB, red: 0.6406044363975525, green: 0.8100000023841858, blue: 0.5102999806404114, opacity: 1.0) - public static let semanticSuccess400 = Color(.sRGB, red: 0.5176470875740051, green: 0.772549033164978, blue: 0.32549020648002625, opacity: 1.0) - public static let semanticSuccess500 = Color(.sRGB, red: 0.37514281272888184, green: 0.6499999761581421, blue: 0.1671428382396698, opacity: 1.0) - public static let semanticSuccess600 = Color(.sRGB, red: 0.2831125855445862, green: 0.5699999928474426, blue: 0.12079471349716187, opacity: 1.0) - public static let semanticSuccess700 = Color(.sRGB, red: 0.21176470816135406, green: 0.5137255191802979, blue: 0.08627451211214066, opacity: 1.0) - public static let semanticSuccess800 = Color(.sRGB, red: 0.0, green: 0.3843137323856354, blue: 0.003921568859368564, opacity: 1.0) + public static let neutrals100 = Color(.sRGB, red: 0.97, green: 0.97, blue: 0.97, opacity: 1.0) + public static let neutrals200 = Color(.sRGB, red: 0.913725, green: 0.913725, blue: 0.913725, opacity: 1.0) + public static let neutrals300 = Color(.sRGB, red: 0.803922, green: 0.803922, blue: 0.803922, opacity: 1.0) + public static let neutrals400 = Color(.sRGB, red: 0.63, green: 0.63, blue: 0.63, opacity: 1.0) + public static let neutrals500 = Color(.sRGB, red: 0.462745, green: 0.462745, blue: 0.462745, opacity: 1.0) + public static let neutrals600 = Color(.sRGB, red: 0.290196, green: 0.290196, blue: 0.290196, opacity: 1.0) + public static let neutrals700 = Color(.sRGB, red: 0.168627, green: 0.168627, blue: 0.168627, opacity: 1.0) + public static let neutrals800 = Color(.sRGB, red: 0.066667, green: 0.066667, blue: 0.066667, opacity: 1.0) + public static let neutrals900 = Color(.sRGB, red: 0.023529, green: 0.031373, blue: 0.039216, opacity: 1.0) + public static let semanticError100 = Color(.sRGB, red: 0.996078, green: 0.94902, blue: 0.945098, opacity: 1.0) + public static let semanticError200 = Color(.sRGB, red: 0.976471, green: 0.870588, blue: 0.862745, opacity: 1.0) + public static let semanticError300 = Color(.sRGB, red: 0.917647, green: 0.607843, blue: 0.619608, opacity: 1.0) + public static let semanticError400 = Color(.sRGB, red: 0.92, green: 0.4048, blue: 0.425686, opacity: 1.0) + public static let semanticError500 = Color(.sRGB, red: 0.878431, green: 0.243137, blue: 0.25098, opacity: 1.0) + public static let semanticError600 = Color(.sRGB, red: 0.698698, green: 0.146893, blue: 0.146893, opacity: 1.0) + public static let semanticError700 = Color(.sRGB, red: 0.583789, green: 0.144047, blue: 0.144047, opacity: 1.0) + public static let semanticError800 = Color(.sRGB, red: 0.468506, green: 0.021527, blue: 3.8e-05, opacity: 1.0) + public static let semanticSuccess100 = Color(.sRGB, red: 0.929412, green: 0.968627, blue: 0.905882, opacity: 1.0) + public static let semanticSuccess200 = Color(.sRGB, red: 0.831373, green: 0.917647, blue: 0.764706, opacity: 1.0) + public static let semanticSuccess300 = Color(.sRGB, red: 0.640604, green: 0.81, blue: 0.5103, opacity: 1.0) + public static let semanticSuccess400 = Color(.sRGB, red: 0.517647, green: 0.772549, blue: 0.32549, opacity: 1.0) + public static let semanticSuccess500 = Color(.sRGB, red: 0.375143, green: 0.65, blue: 0.167143, opacity: 1.0) + public static let semanticSuccess600 = Color(.sRGB, red: 0.283113, green: 0.57, blue: 0.120795, opacity: 1.0) + public static let semanticSuccess700 = Color(.sRGB, red: 0.211765, green: 0.513726, blue: 0.086275, opacity: 1.0) + public static let semanticSuccess800 = Color(.sRGB, red: 0.0, green: 0.384314, blue: 0.003922, opacity: 1.0) public static let transparentTransparent = Color(.sRGB, red: 1.0, green: 1.0, blue: 1.0, opacity: 0.0) } public enum Spacing { @@ -73,6 +74,8 @@ public enum Primitives { public static let fontSizeFontSize40 = Primitives.Spacing.spacing40 public static let fontSizeFontSize48 = Primitives.Spacing.spacing48 public static let fontSizeFontSize56 = Primitives.Spacing.spacing56 + public static let fontWeightMedium: Int = 500 + public static let fontWeightRegular: Int = 400 public static let kerningNone: CGFloat = CGFloat(0.0) public static let kerningSpacious: CGFloat = CGFloat(1.0) public static let kerningTight: CGFloat = CGFloat(-0.5) diff --git a/Alfie/AlfieKit/Sources/SharedUI/GeneratedTokens/Theme+Generated.swift b/Alfie/AlfieKit/Sources/SharedUI/GeneratedTokens/Theme+Generated.swift index 41a202fb..c5f6ee58 100644 --- a/Alfie/AlfieKit/Sources/SharedUI/GeneratedTokens/Theme+Generated.swift +++ b/Alfie/AlfieKit/Sources/SharedUI/GeneratedTokens/Theme+Generated.swift @@ -4,14 +4,30 @@ import SwiftUI public enum Theme { + public static let borderMedium = Primitives.Colours.neutrals400 public static let borderSoft = Primitives.Colours.neutrals200 public static let buttonDestructiveBackgroundDestructiveDefault = Primitives.Colours.semanticError600 + public static let buttonDestructiveBackgroundDestructiveDisabled = Primitives.Colours.neutrals300 + public static let buttonDestructiveContentDestructiveDefault = Primitives.Colours.neutrals0 + public static let buttonDestructiveContentDestructiveDisabled = Primitives.Colours.neutrals500 public static let buttonDestructiveStrokeDestructiveDefault = Primitives.Colours.semanticError600 + public static let buttonDestructiveStrokeDestructiveDisabled = Primitives.Colours.neutrals300 public static let buttonPrimaryBackgroundPrimaryDefault = Primitives.Colours.neutrals800 + public static let buttonPrimaryBackgroundPrimaryDisabled = Primitives.Colours.neutrals300 + public static let buttonPrimaryContentPrimaryDefault = Primitives.Colours.neutrals0 + public static let buttonPrimaryContentPrimaryDisabled = Primitives.Colours.neutrals500 + public static let buttonPrimaryStrokePrimaryDefault = Primitives.Colours.neutrals800 + public static let buttonPrimaryStrokePrimaryDisabled = Primitives.Colours.neutrals300 public static let buttonSecondaryBackgroundSecondaryDefault = Primitives.Colours.transparentTransparent public static let buttonSecondaryBackgroundSecondaryDisabled = Primitives.Colours.transparentTransparent + public static let buttonSecondaryContentSecondaryDefault = Primitives.Colours.neutrals800 + public static let buttonSecondaryContentSecondaryDisabled = Primitives.Colours.neutrals500 + public static let buttonSecondaryStrokeSecondaryDefault = Primitives.Colours.neutrals900 + public static let buttonSecondaryStrokeSecondaryDisabled = Primitives.Colours.neutrals500 public static let buttonTerciaryBackgroundTerciaryDefault = Primitives.Colours.transparentTransparent public static let buttonTerciaryBackgroundTerciaryDisabled = Primitives.Colours.transparentTransparent + public static let buttonTerciaryContentTerciaryDefault = Primitives.Colours.neutrals800 + public static let buttonTerciaryContentTerciaryDisabled = Primitives.Colours.neutrals500 public static let buttonTerciaryStrokeTerciaryDefault = Primitives.Colours.transparentTransparent public static let buttonTerciaryStrokeTerciaryDisabled = Primitives.Colours.transparentTransparent public static let contentContentInvertedPrimary = Primitives.Colours.neutrals0 diff --git a/Alfie/AlfieKit/Sources/SharedUI/GeneratedTokens/Typography+Generated.swift b/Alfie/AlfieKit/Sources/SharedUI/GeneratedTokens/Typography+Generated.swift index 00009e56..bdd3a45b 100644 --- a/Alfie/AlfieKit/Sources/SharedUI/GeneratedTokens/Typography+Generated.swift +++ b/Alfie/AlfieKit/Sources/SharedUI/GeneratedTokens/Typography+Generated.swift @@ -23,28 +23,28 @@ public enum Typography { public enum Body { public static let large = TypographyStyle( fontFamily: Primitives.Typography.fontFamilyPrimaryIos, - fontWeight: 400, + fontWeight: Primitives.Typography.fontWeightRegular, fontSize: Primitives.Spacing.spacing18, lineHeight: Primitives.Spacing.spacing28, letterSpacing: Primitives.Typography.kerningNone ) public static let medium = TypographyStyle( fontFamily: Primitives.Typography.fontFamilyPrimaryIos, - fontWeight: 400, + fontWeight: Primitives.Typography.fontWeightRegular, fontSize: Primitives.Spacing.spacing16, lineHeight: Primitives.Spacing.spacing24, letterSpacing: Primitives.Typography.kerningNone ) public static let mediumStrikethrough = TypographyStyle( fontFamily: Primitives.Typography.fontFamilyPrimaryIos, - fontWeight: 400, + fontWeight: Primitives.Typography.fontWeightRegular, fontSize: Primitives.Spacing.spacing16, lineHeight: Primitives.Spacing.spacing24, letterSpacing: Primitives.Typography.kerningNone ) public static let small = TypographyStyle( fontFamily: Primitives.Typography.fontFamilyPrimaryIos, - fontWeight: 400, + fontWeight: Primitives.Typography.fontWeightRegular, fontSize: Primitives.Spacing.spacing12, lineHeight: Primitives.Spacing.spacing16, letterSpacing: Primitives.Typography.kerningNone @@ -53,21 +53,21 @@ public enum Typography { public enum Display { public static let large = TypographyStyle( fontFamily: Primitives.Typography.fontFamilyBrand, - fontWeight: 400, + fontWeight: Primitives.Typography.fontWeightRegular, fontSize: Primitives.Spacing.spacing24, lineHeight: Primitives.Spacing.spacing40, letterSpacing: Primitives.Typography.kerningNone ) public static let medium = TypographyStyle( fontFamily: Primitives.Typography.fontFamilyBrand, - fontWeight: 400, + fontWeight: Primitives.Typography.fontWeightRegular, fontSize: Primitives.Spacing.spacing20, lineHeight: Primitives.Spacing.spacing32, letterSpacing: Primitives.Typography.kerningNone ) public static let small = TypographyStyle( fontFamily: Primitives.Typography.fontFamilyBrand, - fontWeight: 400, + fontWeight: Primitives.Typography.fontWeightRegular, fontSize: Primitives.Spacing.spacing18, lineHeight: Primitives.Spacing.spacing28, letterSpacing: Primitives.Typography.kerningNone @@ -76,28 +76,28 @@ public enum Typography { public enum Heading { public static let large = TypographyStyle( fontFamily: Primitives.Typography.fontFamilyPrimaryIos, - fontWeight: 500, + fontWeight: Primitives.Typography.fontWeightMedium, fontSize: Primitives.Spacing.spacing32, lineHeight: Primitives.Spacing.spacing40, letterSpacing: Primitives.Typography.kerningTight ) public static let medium = TypographyStyle( fontFamily: Primitives.Typography.fontFamilyPrimaryIos, - fontWeight: 500, + fontWeight: Primitives.Typography.fontWeightMedium, fontSize: Primitives.Spacing.spacing24, lineHeight: Primitives.Spacing.spacing32, letterSpacing: Primitives.Typography.kerningTight ) public static let small = TypographyStyle( fontFamily: Primitives.Typography.fontFamilyPrimaryIos, - fontWeight: 500, + fontWeight: Primitives.Typography.fontWeightMedium, fontSize: Primitives.Spacing.spacing20, lineHeight: Primitives.Spacing.spacing28, letterSpacing: Primitives.Typography.kerningTight ) public static let xSmall = TypographyStyle( fontFamily: Primitives.Typography.fontFamilyPrimaryIos, - fontWeight: 500, + fontWeight: Primitives.Typography.fontWeightMedium, fontSize: Primitives.Spacing.spacing16, lineHeight: Primitives.Spacing.spacing20, letterSpacing: Primitives.Typography.kerningTight @@ -106,14 +106,14 @@ public enum Typography { public enum Label { public static let small = TypographyStyle( fontFamily: Primitives.Typography.fontFamilyPrimaryIos, - fontWeight: 400, + fontWeight: Primitives.Typography.fontWeightRegular, fontSize: Primitives.Spacing.spacing12, lineHeight: Primitives.Spacing.spacing16, letterSpacing: Primitives.Typography.kerningNone ) public static let smallBold = TypographyStyle( fontFamily: Primitives.Typography.fontFamilyPrimaryIos, - fontWeight: 500, + fontWeight: Primitives.Typography.fontWeightMedium, fontSize: Primitives.Spacing.spacing12, lineHeight: Primitives.Spacing.spacing16, letterSpacing: Primitives.Typography.kerningNone @@ -122,14 +122,14 @@ public enum Typography { public enum Link { public static let medium = TypographyStyle( fontFamily: Primitives.Typography.fontFamilyPrimaryIos, - fontWeight: 500, + fontWeight: Primitives.Typography.fontWeightMedium, fontSize: Primitives.Spacing.spacing16, lineHeight: Primitives.Spacing.spacing24, letterSpacing: Primitives.Typography.kerningNone ) public static let small = TypographyStyle( fontFamily: Primitives.Typography.fontFamilyPrimaryIos, - fontWeight: 500, + fontWeight: Primitives.Typography.fontWeightMedium, fontSize: Primitives.Spacing.spacing12, lineHeight: Primitives.Spacing.spacing16, letterSpacing: Primitives.Typography.kerningNone diff --git a/Alfie/scripts/pull-design-tokens.sh b/Alfie/scripts/pull-design-tokens.sh index b794c280..521a4687 100755 --- a/Alfie/scripts/pull-design-tokens.sh +++ b/Alfie/scripts/pull-design-tokens.sh @@ -7,6 +7,9 @@ # DESIGN_TOKENS_SRC=/path/to/local/checkout → copy from a local clone (no network) # otherwise → shallow-clone DESIGN_TOKENS_REMOTE (SSH by default) # +# Branch (clone path only; ignored when DESIGN_TOKENS_SRC is set): +# defaults to `main`; override with DESIGN_TOKENS_REF= for pre-merge testing. +# # Credentials are never echoed (no `set -x` around the clone) and only *.json we need is copied # (never `cp -R` the clone, which could drag in .git/credentials). @@ -42,8 +45,9 @@ if [[ -n "${DESIGN_TOKENS_SRC:-}" ]]; then else SRC="$(mktemp -d)" trap 'rm -rf "$SRC"' EXIT - echo "⬇️ Cloning $TOKENS_REMOTE (auth not echoed)…" - ( set +x; git clone --depth 1 "$TOKENS_REMOTE" "$SRC" >/dev/null ) + REF="${DESIGN_TOKENS_REF:-main}" + echo "⬇️ Cloning $TOKENS_REMOTE @ $REF (auth not echoed)…" + ( set +x; git clone --depth 1 --branch "$REF" "$TOKENS_REMOTE" "$SRC" >/dev/null ) fi mkdir -p "$DEST" diff --git a/Tools/DesignTokenGen/Sources/DesignTokenGenCore/TokenLoader.swift b/Tools/DesignTokenGen/Sources/DesignTokenGenCore/TokenLoader.swift index 8071ba5d..da066160 100644 --- a/Tools/DesignTokenGen/Sources/DesignTokenGenCore/TokenLoader.swift +++ b/Tools/DesignTokenGen/Sources/DesignTokenGenCore/TokenLoader.swift @@ -11,10 +11,13 @@ public struct LoadedTokens { } public enum TokenLoader { - /// iOS mode choices for the two multi-mode collections (PLAN.md Q3: mobile uses Small at codegen). + /// iOS mode choices for multi-mode collections (PLAN.md Q3: mobile uses Small at codegen). + /// Every collection that has more than one mode MUST be pinned here so codegen knows which + /// single mode iOS ships — an unpinned multi-mode collection fails fast in `selectedFiles`. static let modeForCollection: [String: String] = [ "system": "ios", "screen-size": "small-(s)", + "theme": "alfie-theme", ] static let documentationPrefix = "~~doc-" @@ -68,8 +71,15 @@ public enum TokenLoader { throw DesignTokenError.malformedToken(name: "manifest.json", reason: "collection '\(collection)' is missing expected mode '\(mode)'") } chosen = list - } else { + } else if modes.count <= 1 { + // Single-mode collection: load its only mode. chosen = modes.values.compactMap { $0 as? [Any] }.flatMap { $0 } + } else { + // A newly multi-mode collection with no pin would otherwise load every mode's file + // — including ones pull-design-tokens.sh doesn't ship — and crash later with an + // opaque fileNotFound. Fail here with an actionable message instead. + let modeNames = modes.keys.sorted().joined(separator: ", ") + throw DesignTokenError.malformedToken(name: "manifest.json", reason: "collection '\(collection)' has multiple modes [\(modeNames)] but no pinned mode — add one to TokenLoader.modeForCollection to select the iOS mode") } files.append(contentsOf: chosen.compactMap { $0 as? String }) } diff --git a/Tools/DesignTokenGen/Tests/DesignTokenGenCoreTests/Fixtures/mini/manifest.json b/Tools/DesignTokenGen/Tests/DesignTokenGenCoreTests/Fixtures/mini/manifest.json index 97a5e994..287446e9 100644 --- a/Tools/DesignTokenGen/Tests/DesignTokenGenCoreTests/Fixtures/mini/manifest.json +++ b/Tools/DesignTokenGen/Tests/DesignTokenGenCoreTests/Fixtures/mini/manifest.json @@ -46,6 +46,9 @@ "modes": { "alfie-theme": [ "theme.alfie-theme.tokens.json" + ], + "selfridges": [ + "theme.selfridges.tokens.json" ] } }, diff --git a/Tools/DesignTokenGen/Tests/DesignTokenGenCoreTests/GeneratorTests.swift b/Tools/DesignTokenGen/Tests/DesignTokenGenCoreTests/GeneratorTests.swift index 6b47c741..ae93d17e 100644 --- a/Tools/DesignTokenGen/Tests/DesignTokenGenCoreTests/GeneratorTests.swift +++ b/Tools/DesignTokenGen/Tests/DesignTokenGenCoreTests/GeneratorTests.swift @@ -46,6 +46,40 @@ struct TokenLoaderTests { _ = try TokenLoader.parseValue(type: "dimension", raw: ["value": 1, "unit": "rem"], name: "x") } } + + @Test("theme is pinned to alfie-theme, skipping the file-less selfridges mode (regression: dual-mode theme used to load every mode's file)") + func themeModeSelection() throws { + // The fixture's manifest lists a "selfridges" theme mode with no backing file. If theme + // ever stops being pinned, selectedFiles would include theme.selfridges.tokens.json and + // load() would throw fileNotFound. + let files = try TokenLoader.selectedFiles(manifestURL: miniURL().appendingPathComponent("manifest.json")) + #expect(files.contains("theme.alfie-theme.tokens.json")) + #expect(!files.contains("theme.selfridges.tokens.json")) + _ = try TokenLoader.load(inputDirectory: miniURL()) // must still load cleanly + } + + @Test("an unpinned collection that gains a second mode fails fast with an actionable message") + func unpinnedMultiModeFailsFast() throws { + // A future collection gaining a second mode without a pin must be caught here, not crash + // later on a missing file. "brand-new" is deliberately absent from modeForCollection. + let manifest = """ + { "collections": { "brand-new": { "modes": { + "alfie-theme": ["brand-new.alfie-theme.tokens.json"], + "selfridges": ["brand-new.selfridges.tokens.json"] + } } } } + """ + let tmp = URL(fileURLWithPath: NSTemporaryDirectory()).appendingPathComponent("mm-\(UUID().uuidString).json") + try manifest.write(to: tmp, atomically: true, encoding: .utf8) + defer { try? FileManager.default.removeItem(at: tmp) } + // Assert on the message, not just the error type — the whole point is that it's actionable + // (names the offending collection and tells the maintainer to add a pin). + #expect { + _ = try TokenLoader.selectedFiles(manifestURL: tmp) + } throws: { error in + let message = String(describing: error) + return message.contains("brand-new") && message.contains("no pinned mode") + } + } } @Suite("Resolver")