@webority/tokens 0.0.0-stage → 0.90.0

package/dist/source/palette.tokens.json

@@ -0,0 +1,1406 @@
+{
+    "palette": {
+        "$description": "Raw colours. Library-internal: product code, phone code and Canvas read meanings, never these.",
+        "$extensions": {
+            "com.webority": {
+                "internal": true
+            }
+        },
+        "primary": {
+            "$type": "color",
+            "$value": "#4F46E5",
+            "$description": "Brand primary fill for primary buttons, selected states and the first chart series."
+        },
+        "primary-hover": {
+            "$type": "color",
+            "$value": "#6366F1",
+            "$description": "Primary fill while a control is hovered."
+        },
+        "primary-pressed": {
+            "$type": "color",
+            "$value": "#4338CA",
+            "$description": "Primary fill while a control is pressed or active."
+        },
+        "primary-50": {
+            "$type": "color",
+            "$value": "#818CF8",
+            "$description": "Strongest soft primary fill or border tint that follows dark mode."
+        },
+        "primary-30": {
+            "$type": "color",
+            "$value": "#A5B4FC",
+            "$description": "Medium soft primary fill or border tint that follows dark mode."
+        },
+        "primary-20": {
+            "$type": "color",
+            "$value": "#C7D2FE",
+            "$description": "Light soft primary fill or border tint that follows dark mode."
+        },
+        "primary-15": {
+            "$type": "color",
+            "$value": "#DDE1FD",
+            "$description": "Lighter soft primary fill or border tint that follows dark mode."
+        },
+        "primary-10": {
+            "$type": "color",
+            "$value": "#E0E7FF",
+            "$description": "Pale soft primary fill or border tint that follows dark mode."
+        },
+        "primary-5": {
+            "$type": "color",
+            "$value": "#EEF2FF",
+            "$description": "Faintest soft primary fill or border tint that follows dark mode."
+        },
+        "text-heading": {
+            "$type": "color",
+            "$value": "#071437",
+            "$description": "Heading ink for page and section titles."
+        },
+        "text-1": {
+            "$type": "color",
+            "$value": "#252F4A",
+            "$description": "Primary body text, a step softer than the heading ink."
+        },
+        "text-2": {
+            "$type": "color",
+            "$value": "#4B5675",
+            "$description": "Secondary text for descriptions, sub-labels and muted copy."
+        },
+        "text-3": {
+            "$type": "color",
+            "$value": "#687088",
+            "$description": "Tertiary text for hints, captions, labels, timestamps and placeholders."
+        },
+        "text-4": {
+            "$type": "color",
+            "$value": "#99A1B7",
+            "$description": "Decorative faint ink, not for text a person must read."
+        },
+        "text-5": {
+            "$type": "color",
+            "$value": "#C4CADA",
+            "$description": "Faintest ink, for decorative marks."
+        },
+        "bg-page": {
+            "$type": "color",
+            "$value": "#F4F6F8",
+            "$description": "Page background behind every surface in light mode."
+        },
+        "bg-light": {
+            "$type": "color",
+            "$value": "#FFFFFF",
+            "$description": "White card and panel surface, the lightest fill in light mode."
+        },
+        "bg-elevated": {
+            "$type": "color",
+            "$value": "#F9FBFC",
+            "$description": "Subtle raised surface, one step off the page."
+        },
+        "bg-muted": {
+            "$type": "color",
+            "$value": "#F5F6FA",
+            "$description": "Muted fill for grouped areas and quiet controls."
+        },
+        "field-bg": {
+            "$type": "color",
+            "$value": "#F9FBFC",
+            "$description": "Resting fill of every input-like control, such as fields, selects and textareas."
+        },
+        "field-border": {
+            "$type": "color",
+            "$value": "#DFE2EA",
+            "$description": "Resting border of every input-like control."
+        },
+        "field-border-hover": {
+            "$type": "color",
+            "$value": "#C4CADA",
+            "$description": "Hover border of every input-like control."
+        },
+        "border-light": {
+            "$type": "color",
+            "$value": "#EBEDF3",
+            "$description": "Default hairline border of cards, tables and dividers."
+        },
+        "border-soft": {
+            "$type": "color",
+            "$value": "#F4F6F8",
+            "$description": "Softest border, for inner dividers."
+        },
+        "border-strong": {
+            "$type": "color",
+            "$value": "#C4CADA",
+            "$description": "Strong border for emphasised separators, chart axes and unselected control outlines."
+        },
+        "progress-track": {
+            "$type": "color",
+            "$value": "#E1E5EE",
+            "$description": "Unfilled track of a progress bar or meter."
+        },
+        "scrollbar": {
+            "$type": "color",
+            "$value": "rgba(145, 158, 171, 0.45)",
+            "$description": "Resting thumb colour of a thin scrollbar."
+        },
+        "scrollbar-hover": {
+            "$type": "color",
+            "$value": "rgba(145, 158, 171, 0.65)",
+            "$description": "Scrollbar thumb colour while it is hovered."
+        },
+        "scrollbar-active": {
+            "$type": "color",
+            "$value": "rgba(145, 158, 171, 0.85)",
+            "$description": "Scrollbar thumb colour while it is dragged."
+        },
+        "surface-soft": {
+            "$type": "color",
+            "$value": "#F2EFFE",
+            "$description": "Soft tint surface for marketing callouts and mega-menu hover."
+        },
+        "surface-violet": {
+            "$type": "color",
+            "$value": "#ECE4FE",
+            "$description": "Violet-tinted surface for marketing section accents and callout cards."
+        },
+        "surface-violet-soft": {
+            "$type": "color",
+            "$value": "#FCFCFC",
+            "$description": "Near-white surface for marketing section accents."
+        },
+        "surface-mute": {
+            "$type": "color",
+            "$value": "#F9FBFC",
+            "$description": "Neutral wash surface for marketing sections and panels."
+        },
+        "ink": {
+            "$type": "color",
+            "$value": "#000000",
+            "$description": "Pure black ink, the highest-contrast text colour."
+        },
+        "fg-2": {
+            "$type": "color",
+            "$value": "{palette.text-1}",
+            "$description": "Marketing alias of the primary body text ink."
+        },
+        "fg-3": {
+            "$type": "color",
+            "$value": "{palette.text-2}",
+            "$description": "Marketing alias of the secondary text ink."
+        },
+        "fg-4": {
+            "$type": "color",
+            "$value": "{palette.text-3}",
+            "$description": "Marketing alias of the tertiary text ink."
+        },
+        "fg-5": {
+            "$type": "color",
+            "$value": "{palette.text-5}",
+            "$description": "Marketing alias of the faintest text ink."
+        },
+        "neutral-border-dark": {
+            "$type": "color",
+            "$value": "#EBEDF3",
+            "$description": "Border tone of table emphasis rows and dividers."
+        },
+        "neutral-border-light": {
+            "$type": "color",
+            "$value": "#F9FBFC",
+            "$description": "Faintest border tone, for dividers."
+        },
+        "neutral-bg-dark": {
+            "$type": "color",
+            "$value": "#F5F6FA",
+            "$description": "Muted background of table emphasis rows and mega-menu hover."
+        },
+        "neutral-bg-light": {
+            "$type": "color",
+            "$value": "#F9FBFC",
+            "$description": "Faint background for table emphasis and mega-menu hover."
+        },
+        "accent-dark": {
+            "$type": "color",
+            "$value": "{palette.primary-pressed}",
+            "$description": "Pressed and hover accent colour in CSS, following the pressed primary."
+        },
+        "primary-text": {
+            "$type": "color",
+            "$value": "{palette.primary}",
+            "$description": "Text and icon colour on a solid primary fill, such as a primary button label.",
+            "$extensions": {
+                "com.webority": {
+                    "derive": "on-fill"
+                }
+            }
+        },
+        "primary-ink": {
+            "$type": "color",
+            "$value": "{palette.primary}",
+            "$description": "Primary as text and small glyphs on light surfaces, passing AA contrast.",
+            "$extensions": {
+                "com.webority": {
+                    "derive": "aa-ink"
+                }
+            }
+        },
+        "info-text": {
+            "$type": "color",
+            "$value": "#1460ba",
+            "$description": "Info colour as text on light surfaces."
+        },
+        "info-active": {
+            "$type": "color",
+            "$value": "#056EE9",
+            "$description": "Info ink for icons and active states on light surfaces."
+        },
+        "info": {
+            "$type": "color",
+            "$value": "#056EE9",
+            "$description": "Vivid info fill for badges, dots and info buttons."
+        },
+        "info-50": {
+            "$type": "color",
+            "$value": "#8DC2FF",
+            "$description": "Info tint 50 for borders and the strongest soft info fill."
+        },
+        "info-30": {
+            "$type": "color",
+            "$value": "#BBDBFF",
+            "$description": "Info tint 30 for soft fills and borders of alerts and badges."
+        },
+        "info-20": {
+            "$type": "color",
+            "$value": "#D1E6FF",
+            "$description": "Info tint 20 for soft fills behind info alerts and badges."
+        },
+        "info-10": {
+            "$type": "color",
+            "$value": "#E9F3FF",
+            "$description": "Info tint 10, the soft background of info alerts and badges."
+        },
+        "info-5": {
+            "$type": "color",
+            "$value": "#F3F9FF",
+            "$description": "Faintest info tint, for hover washes and soft info backgrounds."
+        },
+        "success-text": {
+            "$type": "color",
+            "$value": "#0e7531",
+            "$description": "Success colour as text on light surfaces, darkened to pass AA."
+        },
+        "success-strong": {
+            "$type": "color",
+            "$value": "#0e7531",
+            "$description": "Deep success fill behind white text, such as progress-bar labels."
+        },
+        "success-active": {
+            "$type": "color",
+            "$value": "#04B440",
+            "$description": "Active success fill, the deepest vivid success tone."
+        },
+        "success": {
+            "$type": "color",
+            "$value": "#04B440",
+            "$description": "Vivid success fill for badges, dots and success buttons."
+        },
+        "success-50": {
+            "$type": "color",
+            "$value": "#8BE3A9",
+            "$description": "Success tint 50 for borders and the strongest soft success fill."
+        },
+        "success-30": {
+            "$type": "color",
+            "$value": "#BAEECC",
+            "$description": "Success tint 30 for soft fills and borders of alerts and badges."
+        },
+        "success-20": {
+            "$type": "color",
+            "$value": "#D1F4DD",
+            "$description": "Success tint 20 for soft fills behind success alerts and badges."
+        },
+        "success-10": {
+            "$type": "color",
+            "$value": "#E8FAEE",
+            "$description": "Success tint 10, the soft background of success alerts and badges."
+        },
+        "success-5": {
+            "$type": "color",
+            "$value": "#F3FCF6",
+            "$description": "Faintest success tint, for hover washes and soft success backgrounds."
+        },
+        "warning-text": {
+            "$type": "color",
+            "$value": "#876100",
+            "$description": "Warning colour as text on light surfaces, darkened to pass AA."
+        },
+        "warning-strong": {
+            "$type": "color",
+            "$value": "#9A6B00",
+            "$description": "Deep warning fill behind white text, such as the warning button."
+        },
+        "warning-strong-hover": {
+            "$type": "color",
+            "$value": "#855C00",
+            "$description": "Deep warning fill while a warning button with white text is hovered."
+        },
+        "warning-active": {
+            "$type": "color",
+            "$value": "#DFA000",
+            "$description": "Active warning fill, the deepest vivid warning tone."
+        },
+        "warning": {
+            "$type": "color",
+            "$value": "#DFA000",
+            "$description": "Vivid warning fill for badges and dots."
+        },
+        "warning-50": {
+            "$type": "color",
+            "$value": "#FBD880",
+            "$description": "Warning tint 50 for borders and the strongest soft warning fill."
+        },
+        "warning-30": {
+            "$type": "color",
+            "$value": "#FDE8B3",
+            "$description": "Warning tint 30 for soft fills and borders of alerts and badges."
+        },
+        "warning-20": {
+            "$type": "color",
+            "$value": "#FDEFCC",
+            "$description": "Warning tint 20 for soft fills behind warning alerts and badges."
+        },
+        "warning-10": {
+            "$type": "color",
+            "$value": "#FFF8E6",
+            "$description": "Warning tint 10, the soft background of warning alerts and badges."
+        },
+        "warning-5": {
+            "$type": "color",
+            "$value": "#FEFBF2",
+            "$description": "Faintest warning tint, for hover washes and soft warning backgrounds."
+        },
+        "danger-text": {
+            "$type": "color",
+            "$value": "#CF1735",
+            "$description": "Error text colour for validation messages and danger text on light surfaces."
+        },
+        "danger-strong": {
+            "$type": "color",
+            "$value": "#C81340",
+            "$description": "Deep danger fill behind white text, such as the danger button."
+        },
+        "danger-strong-hover": {
+            "$type": "color",
+            "$value": "#AB1036",
+            "$description": "Deep danger fill while a danger button with white text is hovered."
+        },
+        "danger-active": {
+            "$type": "color",
+            "$value": "#E82646",
+            "$description": "Active danger fill, the deepest vivid danger tone."
+        },
+        "danger": {
+            "$type": "color",
+            "$value": "#E82646",
+            "$description": "Vivid danger fill for badges, dots and danger buttons."
+        },
+        "danger-50": {
+            "$type": "color",
+            "$value": "#FC94AD",
+            "$description": "Danger tint 50 for borders and the strongest soft danger fill."
+        },
+        "danger-30": {
+            "$type": "color",
+            "$value": "#FDBFCE",
+            "$description": "Danger tint 30 for soft fills and borders of alerts and badges."
+        },
+        "danger-20": {
+            "$type": "color",
+            "$value": "#FED4DE",
+            "$description": "Danger tint 20 for soft fills behind danger alerts and badges."
+        },
+        "danger-10": {
+            "$type": "color",
+            "$value": "#FFEAEF",
+            "$description": "Danger tint 10, the soft background of danger alerts and badges."
+        },
+        "danger-5": {
+            "$type": "color",
+            "$value": "#FEF4F6",
+            "$description": "Faintest danger tint, for hover washes and soft danger backgrounds."
+        },
+        "chart-1": {
+            "$type": "color",
+            "$value": "{palette.primary}",
+            "$description": "Colour of chart series 1, the brand primary."
+        },
+        "chart-2": {
+            "$type": "color",
+            "$value": "#eb6834",
+            "$description": "Colour of chart series 2 of the eight categorical series."
+        },
+        "chart-3": {
+            "$type": "color",
+            "$value": "#1baf7a",
+            "$description": "Colour of chart series 3 of the eight categorical series."
+        },
+        "chart-4": {
+            "$type": "color",
+            "$value": "#eda100",
+            "$description": "Colour of chart series 4 of the eight categorical series."
+        },
+        "chart-5": {
+            "$type": "color",
+            "$value": "#e87ba4",
+            "$description": "Colour of chart series 5 of the eight categorical series."
+        },
+        "chart-6": {
+            "$type": "color",
+            "$value": "#008300",
+            "$description": "Colour of chart series 6 of the eight categorical series."
+        },
+        "chart-7": {
+            "$type": "color",
+            "$value": "#2a78d6",
+            "$description": "Colour of chart series 7 of the eight categorical series."
+        },
+        "chart-8": {
+            "$type": "color",
+            "$value": "#e34948",
+            "$description": "Colour of chart series 8 of the eight categorical series."
+        },
+        "chart-seq-0": {
+            "$type": "color",
+            "$value": "{palette.bg-muted}",
+            "$description": "Faintest step of the magnitude ramp, for empty heatmap and calendar cells."
+        },
+        "chart-seq-1": {
+            "$type": "color",
+            "$value": "{palette.primary-10}",
+            "$description": "First step of the one-hue magnitude ramp for heatmap and calendar cells."
+        },
+        "chart-seq-2": {
+            "$type": "color",
+            "$value": "{palette.primary-20}",
+            "$description": "Second step of the one-hue magnitude ramp for heatmap and calendar cells."
+        },
+        "chart-seq-3": {
+            "$type": "color",
+            "$value": "{palette.primary-30}",
+            "$description": "Third step of the one-hue magnitude ramp for heatmap and calendar cells."
+        },
+        "chart-seq-4": {
+            "$type": "color",
+            "$value": "{palette.primary-50}",
+            "$description": "Fourth step of the one-hue magnitude ramp for heatmap and calendar cells."
+        },
+        "chart-seq-5": {
+            "$type": "color",
+            "$value": "{palette.primary-hover}",
+            "$description": "Fifth step of the one-hue magnitude ramp for heatmap and calendar cells."
+        },
+        "chart-seq-6": {
+            "$type": "color",
+            "$value": "{palette.primary-pressed}",
+            "$description": "Strongest step of the one-hue magnitude ramp for heatmap and calendar cells."
+        },
+        "chart-diverging-low": {
+            "$type": "color",
+            "$value": "#e34948",
+            "$description": "Colour of values below the midpoint in a diverging chart."
+        },
+        "chart-diverging-mid": {
+            "$type": "color",
+            "$value": "#c4cada",
+            "$description": "Neutral midpoint colour of a diverging chart."
+        },
+        "chart-diverging-high": {
+            "$type": "color",
+            "$value": "#2a78d6",
+            "$description": "Colour of values above the midpoint in a diverging chart."
+        },
+        "chart-neutral": {
+            "$type": "color",
+            "$value": "#99a1b7",
+            "$description": "Context series colour, such as the last period, and the folded Other slice."
+        },
+        "dark-bg-page": {
+            "$type": "color",
+            "$value": "#0f1117",
+            "$description": "Dark page background, the base of every dark-mode surface."
+        },
+        "dark-bg-elevated": {
+            "$type": "color",
+            "$value": "#0d0f15",
+            "$description": "Subtle dark background, one step off the dark page."
+        },
+        "dark-bg-muted": {
+            "$type": "color",
+            "$value": "#232733",
+            "$description": "Dark muted fill for grouped areas and quiet controls."
+        },
+        "dark-bg-surface": {
+            "$type": "color",
+            "$value": "#181b23",
+            "$description": "Dark card and panel surface, one step above the dark page."
+        },
+        "dark-border": {
+            "$type": "color",
+            "$value": "#2a2f3a",
+            "$description": "Dark hairline border of cards, tables and dividers."
+        },
+        "dark-border-strong": {
+            "$type": "color",
+            "$value": "#3a414f",
+            "$description": "Stronger dark border for emphasised separators."
+        },
+        "dark-field-border": {
+            "$type": "color",
+            "$value": "#2a2f3a",
+            "$description": "Resting border of input-like controls in dark mode."
+        },
+        "dark-field-border-hover": {
+            "$type": "color",
+            "$value": "#3a414f",
+            "$description": "Hover border of input-like controls in dark mode."
+        },
+        "dark-progress-track": {
+            "$type": "color",
+            "$value": "#323845",
+            "$description": "Unfilled track of a progress bar or meter in dark mode."
+        },
+        "dark-text": {
+            "$type": "color",
+            "$value": "#e6e8ee",
+            "$description": "Primary body text colour in dark mode."
+        },
+        "dark-text-muted": {
+            "$type": "color",
+            "$value": "#b4b9c6",
+            "$description": "Secondary text colour in dark mode."
+        },
+        "dark-text-subtle": {
+            "$type": "color",
+            "$value": "#8a90a0",
+            "$description": "Tertiary text colour in dark mode, for hints and captions."
+        },
+        "dark-primary": {
+            "$type": "color",
+            "$value": "{palette.primary}",
+            "$description": "Primary as text, rings, focus borders and the fill under dark ink in dark mode.",
+            "$extensions": {
+                "com.webority": {
+                    "derive": "dark-aa-ink"
+                }
+            }
+        },
+        "dark-primary-hover": {
+            "$type": "color",
+            "$value": "{palette.dark-primary}",
+            "$description": "Primary fill while it is hovered in dark mode.",
+            "$extensions": {
+                "com.webority": {
+                    "derive": "dark-hover"
+                }
+            }
+        },
+        "dark-chart-2": {
+            "$type": "color",
+            "$value": "#d95926",
+            "$description": "Dark-mode colour of chart series 2 of the categorical set."
+        },
+        "dark-chart-3": {
+            "$type": "color",
+            "$value": "#199e70",
+            "$description": "Dark-mode colour of chart series 3 of the categorical set."
+        },
+        "dark-chart-4": {
+            "$type": "color",
+            "$value": "#c98500",
+            "$description": "Dark-mode colour of chart series 4 of the categorical set."
+        },
+        "dark-chart-5": {
+            "$type": "color",
+            "$value": "#d55181",
+            "$description": "Dark-mode colour of chart series 5 of the categorical set."
+        },
+        "dark-chart-6": {
+            "$type": "color",
+            "$value": "#008300",
+            "$description": "Dark-mode colour of chart series 6 of the categorical set."
+        },
+        "dark-chart-7": {
+            "$type": "color",
+            "$value": "#3987e5",
+            "$description": "Dark-mode colour of chart series 7 of the categorical set."
+        },
+        "dark-chart-8": {
+            "$type": "color",
+            "$value": "#e66767",
+            "$description": "Dark-mode colour of chart series 8 of the categorical set."
+        },
+        "dark-chart-seq-0": {
+            "$type": "color",
+            "$value": "#20242f",
+            "$description": "Dark-mode faintest step of the magnitude ramp, for empty heatmap cells."
+        },
+        "dark-chart-seq-1": {
+            "$type": "color",
+            "$value": "#262c45",
+            "$description": "Dark-mode first step of the magnitude ramp for heatmap and calendar cells."
+        },
+        "dark-chart-seq-2": {
+            "$type": "color",
+            "$value": "#2f3a70",
+            "$description": "Dark-mode second step of the magnitude ramp for heatmap and calendar cells."
+        },
+        "dark-chart-seq-3": {
+            "$type": "color",
+            "$value": "#3b4ba0",
+            "$description": "Dark-mode third step of the magnitude ramp for heatmap and calendar cells."
+        },
+        "dark-chart-seq-4": {
+            "$type": "color",
+            "$value": "#5168d2",
+            "$description": "Dark-mode fourth step of the magnitude ramp for heatmap and calendar cells."
+        },
+        "dark-chart-seq-5": {
+            "$type": "color",
+            "$value": "#7a90ef",
+            "$description": "Dark-mode fifth step of the magnitude ramp for heatmap and calendar cells."
+        },
+        "dark-chart-seq-6": {
+            "$type": "color",
+            "$value": "#b3c1f7",
+            "$description": "Dark-mode strongest step of the magnitude ramp for heatmap and calendar cells."
+        },
+        "dark-chart-diverging-low": {
+            "$type": "color",
+            "$value": "#e66767",
+            "$description": "Dark-mode colour of values below the midpoint in a diverging chart."
+        },
+        "dark-chart-diverging-mid": {
+            "$type": "color",
+            "$value": "#3a414f",
+            "$description": "Dark-mode neutral midpoint colour of a diverging chart."
+        },
+        "dark-chart-diverging-high": {
+            "$type": "color",
+            "$value": "#3987e5",
+            "$description": "Dark-mode colour of values above the midpoint in a diverging chart."
+        },
+        "dark-chart-neutral": {
+            "$type": "color",
+            "$value": "#5d6475",
+            "$description": "Dark-mode context series colour, such as the last period."
+        },
+        "phone-bg": {
+            "$type": "color",
+            "$value": "#FFFFFF",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["phone"]
+                }
+            }
+        },
+        "phone-bg-subtle": {
+            "$type": "color",
+            "$value": "#F8F8FB",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["phone"]
+                }
+            }
+        },
+        "phone-bg-muted": {
+            "$type": "color",
+            "$value": "#F1F1F5",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["phone"]
+                }
+            }
+        },
+        "phone-surface": {
+            "$type": "color",
+            "$value": "#FFFFFF",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["phone"]
+                }
+            }
+        },
+        "phone-surface-inverse": {
+            "$type": "color",
+            "$value": "#0F0F1A",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["phone"]
+                }
+            }
+        },
+        "phone-text": {
+            "$type": "color",
+            "$value": "#252F4A",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["phone"]
+                }
+            }
+        },
+        "phone-text-body": {
+            "$type": "color",
+            "$value": "#0F0F1A",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["phone"]
+                }
+            }
+        },
+        "phone-text-muted": {
+            "$type": "color",
+            "$value": "#52525B",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["phone"]
+                }
+            }
+        },
+        "phone-text-subtle": {
+            "$type": "color",
+            "$value": "#62626B",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["phone"]
+                }
+            }
+        },
+        "phone-text-inverse": {
+            "$type": "color",
+            "$value": "#FFFFFF",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["phone"]
+                }
+            }
+        },
+        "phone-link": {
+            "$type": "color",
+            "$value": "#5B5BD6",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["phone"]
+                }
+            }
+        },
+        "phone-border": {
+            "$type": "color",
+            "$value": "#E5E5EC",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["phone"]
+                }
+            }
+        },
+        "phone-border-subtle": {
+            "$type": "color",
+            "$value": "#EFEFF3",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["phone"]
+                }
+            }
+        },
+        "phone-focus-ring": {
+            "$type": "color",
+            "$value": "#5B5BD6",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["phone"]
+                }
+            }
+        },
+        "phone-scrim": {
+            "$type": "color",
+            "$value": "rgba(15, 15, 26, 0.5)",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["phone"]
+                }
+            }
+        },
+        "phone-on-scrim": {
+            "$type": "color",
+            "$value": "#FFFFFF",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["phone"]
+                }
+            }
+        },
+        "phone-field-bg": {
+            "$type": "color",
+            "$value": "#F9FBFC",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["phone"]
+                }
+            }
+        },
+        "phone-field-border": {
+            "$type": "color",
+            "$value": "#EBEDF3",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["phone"]
+                }
+            }
+        },
+        "phone-field-border-focus": {
+            "$type": "color",
+            "$value": "#BED2F9",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["phone"]
+                }
+            }
+        },
+        "phone-primary": {
+            "$type": "color",
+            "$value": "#5B5BD6",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["phone"]
+                }
+            }
+        },
+        "phone-primary-hover": {
+            "$type": "color",
+            "$value": "#4F4FBF",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["phone"]
+                }
+            }
+        },
+        "phone-primary-soft": {
+            "$type": "color",
+            "$value": "#EEEEFC",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["phone"]
+                }
+            }
+        },
+        "phone-primary-text": {
+            "$type": "color",
+            "$value": "#4F4FD3",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["phone"]
+                }
+            }
+        },
+        "phone-on-primary": {
+            "$type": "color",
+            "$value": "#FFFFFF",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["phone"]
+                }
+            }
+        },
+        "phone-success": {
+            "$type": "color",
+            "$value": "#18864F",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["phone"]
+                }
+            }
+        },
+        "phone-success-text": {
+            "$type": "color",
+            "$value": "#147042",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["phone"]
+                }
+            }
+        },
+        "phone-on-success": {
+            "$type": "color",
+            "$value": "#FFFFFF",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["phone"]
+                }
+            }
+        },
+        "phone-warning": {
+            "$type": "color",
+            "$value": "#F59E0B",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["phone"]
+                }
+            }
+        },
+        "phone-warning-text": {
+            "$type": "color",
+            "$value": "#8F5C06",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["phone"]
+                }
+            }
+        },
+        "phone-on-warning": {
+            "$type": "color",
+            "$value": "#0F0F1A",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["phone"]
+                }
+            }
+        },
+        "phone-danger": {
+            "$type": "color",
+            "$value": "#E12C32",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["phone"]
+                }
+            }
+        },
+        "phone-danger-text": {
+            "$type": "color",
+            "$value": "#BC1B20",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["phone"]
+                }
+            }
+        },
+        "phone-on-danger": {
+            "$type": "color",
+            "$value": "#FFFFFF",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["phone"]
+                }
+            }
+        },
+        "phone-danger-border": {
+            "$type": "color",
+            "$value": "#E5484D",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["phone"]
+                }
+            }
+        },
+        "phone-info": {
+            "$type": "color",
+            "$value": "#1B6EF5",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["phone"]
+                }
+            }
+        },
+        "phone-info-text": {
+            "$type": "color",
+            "$value": "#0958D9",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["phone"]
+                }
+            }
+        },
+        "phone-on-info": {
+            "$type": "color",
+            "$value": "#FFFFFF",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["phone"]
+                }
+            }
+        },
+        "phone-neutral": {
+            "$type": "color",
+            "$value": "#F4F4F8",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["phone"]
+                }
+            }
+        },
+        "phone-neutral-hover": {
+            "$type": "color",
+            "$value": "#E9E9F0",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["phone"]
+                }
+            }
+        },
+        "phone-on-neutral": {
+            "$type": "color",
+            "$value": "#0F0F1A",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["phone"]
+                }
+            }
+        },
+        "phone-primary-pressed": {
+            "$type": "color",
+            "$value": "#4040A8",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["phone"]
+                }
+            }
+        },
+        "phone-on-neutral-strong": {
+            "$type": "color",
+            "$value": "#FFFFFF",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["phone"]
+                }
+            }
+        },
+        "phone-text-disabled": {
+            "$type": "color",
+            "$value": "#B4B4BB",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["phone"]
+                }
+            }
+        },
+        "phone-surface-pressed": {
+            "$type": "color",
+            "$value": "rgba(15, 15, 26, 0.06)",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["phone"]
+                }
+            }
+        },
+        "phone-surface-hover": {
+            "$type": "color",
+            "$value": "rgba(15, 15, 26, 0.04)",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["phone"]
+                }
+            }
+        },
+        "phone-surface-selected": {
+            "$type": "color",
+            "$value": "rgba(91, 91, 214, 0.1)",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["phone"]
+                }
+            }
+        },
+        "phone-surface-disabled": {
+            "$type": "color",
+            "$value": "#F1F1F5",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["phone"]
+                }
+            }
+        },
+        "phone-skeleton": {
+            "$type": "color",
+            "$value": "#EBEDF3",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["phone"]
+                }
+            }
+        },
+        "phone-skeleton-highlight": {
+            "$type": "color",
+            "$value": "#F5F6FA",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["phone"]
+                }
+            }
+        },
+        "phone-glass-fill": {
+            "$type": "color",
+            "$value": "rgba(255, 255, 255, 0.28)",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["phone"]
+                }
+            }
+        },
+        "phone-glass-border": {
+            "$type": "color",
+            "$value": "rgba(255, 255, 255, 0.45)",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["phone"]
+                }
+            }
+        },
+        "phone-on-glass": {
+            "$type": "color",
+            "$value": "#0F0F1A",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["phone"]
+                }
+            }
+        },
+        "phone-glass-badge": {
+            "$type": "color",
+            "$value": "#FFFFFF",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["phone"]
+                }
+            }
+        },
+        "phone-field-bg-focus": {
+            "$type": "color",
+            "$value": "#FFFFFF",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["phone"]
+                }
+            }
+        },
+        "phone-field-bg-disabled": {
+            "$type": "color",
+            "$value": "#F5F6FA",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["phone"]
+                }
+            }
+        },
+        "phone-field-border-error": {
+            "$type": "color",
+            "$value": "#FDBFCE",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["phone"]
+                }
+            }
+        },
+        "phone-field-label": {
+            "$type": "color",
+            "$value": "#242F4A",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["phone"]
+                }
+            }
+        },
+        "phone-field-text": {
+            "$type": "color",
+            "$value": "#252F4A",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["phone"]
+                }
+            }
+        },
+        "phone-field-text-disabled": {
+            "$type": "color",
+            "$value": "#C4CADA",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["phone"]
+                }
+            }
+        },
+        "phone-field-placeholder": {
+            "$type": "color",
+            "$value": "#626D8B",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["phone"]
+                }
+            }
+        },
+        "phone-field-placeholder-disabled": {
+            "$type": "color",
+            "$value": "#C4CADA",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["phone"]
+                }
+            }
+        },
+        "phone-field-icon": {
+            "$type": "color",
+            "$value": "#7A849F",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["phone"]
+                }
+            }
+        },
+        "phone-field-icon-focus": {
+            "$type": "color",
+            "$value": "#4B5675",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["phone"]
+                }
+            }
+        },
+        "phone-field-icon-disabled": {
+            "$type": "color",
+            "$value": "#C4CADA",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["phone"]
+                }
+            }
+        },
+        "phone-field-caret": {
+            "$type": "color",
+            "$value": "#5B8DEE",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["phone"]
+                }
+            }
+        },
+        "phone-field-message": {
+            "$type": "color",
+            "$value": "#D81736",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["phone"]
+                }
+            }
+        },
+        "phone-avatar-1": {
+            "$type": "color",
+            "$value": "#5B5BD6",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["phone"]
+                }
+            }
+        },
+        "phone-avatar-2": {
+            "$type": "color",
+            "$value": "#0A7979",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["phone"]
+                }
+            }
+        },
+        "phone-avatar-3": {
+            "$type": "color",
+            "$value": "#A45A05",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["phone"]
+                }
+            }
+        },
+        "phone-avatar-4": {
+            "$type": "color",
+            "$value": "#CD226E",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["phone"]
+                }
+            }
+        },
+        "phone-avatar-5": {
+            "$type": "color",
+            "$value": "#2462EB",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["phone"]
+                }
+            }
+        },
+        "phone-avatar-6": {
+            "$type": "color",
+            "$value": "#7C3AED",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["phone"]
+                }
+            }
+        },
+        "phone-avatar-7": {
+            "$type": "color",
+            "$value": "#047C57",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["phone"]
+                }
+            }
+        },
+        "phone-avatar-8": {
+            "$type": "color",
+            "$value": "#D42222",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["phone"]
+                }
+            }
+        },
+        "phone-shadow-sm": {
+            "$type": "color",
+            "$value": "rgba(0, 0, 0, 0.06)",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["phone"]
+                }
+            }
+        },
+        "phone-shadow-md": {
+            "$type": "color",
+            "$value": "rgba(0, 0, 0, 0.08)",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["phone"]
+                }
+            }
+        },
+        "phone-shadow-lg": {
+            "$type": "color",
+            "$value": "rgba(0, 0, 0, 0.1)",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["phone"]
+                }
+            }
+        },
+        "phone-shadow-xl": {
+            "$type": "color",
+            "$value": "rgba(0, 0, 0, 0.14)",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["phone"]
+                }
+            }
+        },
+        "phone-thumb": {
+            "$type": "color",
+            "$value": "#FFFFFF",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["phone"]
+                }
+            }
+        }
+    }
+}