@lumx/core 3.0.7 → 3.1.0

package/src/js/constants/design-tokens.ts

@@ -0,0 +1,2157 @@
+/**
+ * Do not edit directly
+ * Generated on Wed, 26 Oct 2022 13:20:02 GMT
+ */
+
+export const DESIGN_TOKENS = {
+    button: {
+        height: { value: '36px', $aliasedFrom: 'size.m' },
+        'border-radius': { value: '4px', $aliasedFrom: 'border-radius' },
+        'emphasis-high': {
+            'state-default': {
+                padding: { horizontal: { value: '16px', $aliasedFrom: 'spacing.unit.big' } },
+                'border-width': { value: '0' },
+                'theme-light': {
+                    'background-color': {
+                        value: 'var(--lumx-color-primary-N)',
+                        attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 1 } },
+                        $aliasedFrom: 'color.primary.N',
+                    },
+                    color: {
+                        value: 'var(--lumx-color-light-N)',
+                        attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
+                        $aliasedFrom: 'color.light.N',
+                    },
+                    'border-color': { value: 'transparent' },
+                },
+                'theme-dark': {
+                    'background-color': {
+                        value: 'var(--lumx-color-light-N)',
+                        attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
+                        $aliasedFrom: 'color.light.N',
+                    },
+                    color: {
+                        value: 'var(--lumx-color-primary-N)',
+                        attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 1 } },
+                        $aliasedFrom: 'color.primary.N',
+                    },
+                    'border-color': { value: 'transparent' },
+                },
+            },
+            'state-hover': {
+                padding: { horizontal: { value: '16px', $aliasedFrom: 'spacing.unit.big' } },
+                'border-width': { value: '0' },
+                'theme-light': {
+                    'background-color': {
+                        value: 'var(--lumx-color-primary-D1)',
+                        attributes: { hex: '184ed8', rgb: { r: 24, g: 78, b: 216, a: 1 } },
+                        $aliasedFrom: 'color.primary.D1',
+                    },
+                    color: {
+                        value: 'var(--lumx-color-light-N)',
+                        attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
+                        $aliasedFrom: 'color.light.N',
+                    },
+                    'border-color': { value: 'transparent' },
+                },
+                'theme-dark': {
+                    'background-color': {
+                        value: 'var(--lumx-color-light-L1)',
+                        attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.9 } },
+                        $aliasedFrom: 'color.light.L1',
+                    },
+                    color: {
+                        value: 'var(--lumx-color-primary-N)',
+                        attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 1 } },
+                        $aliasedFrom: 'color.primary.N',
+                    },
+                    'border-color': { value: 'transparent' },
+                },
+            },
+            'state-active': {
+                padding: { horizontal: { value: '16px', $aliasedFrom: 'spacing.unit.big' } },
+                'border-width': { value: '0' },
+                'theme-light': {
+                    'background-color': {
+                        value: 'var(--lumx-color-primary-D2)',
+                        attributes: { hex: '1546c1', rgb: { r: 21, g: 70, b: 193, a: 1 } },
+                        $aliasedFrom: 'color.primary.D2',
+                    },
+                    color: {
+                        value: 'var(--lumx-color-light-N)',
+                        attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
+                        $aliasedFrom: 'color.light.N',
+                    },
+                    'border-color': { value: 'transparent' },
+                },
+                'theme-dark': {
+                    'background-color': {
+                        value: 'var(--lumx-color-light-L2)',
+                        attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.8 } },
+                        $aliasedFrom: 'color.light.L2',
+                    },
+                    color: {
+                        value: 'var(--lumx-color-primary-N)',
+                        attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 1 } },
+                        $aliasedFrom: 'color.primary.N',
+                    },
+                    'border-color': { value: 'transparent' },
+                },
+            },
+        },
+        'emphasis-medium': {
+            'state-default': {
+                padding: { horizontal: { value: '16px', $aliasedFrom: 'spacing.unit.big' } },
+                'border-width': { value: '0' },
+                'theme-light': {
+                    'background-color': {
+                        value: 'var(--lumx-color-dark-L5)',
+                        attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.12 } },
+                        $aliasedFrom: 'color.dark.L5',
+                    },
+                    color: {
+                        value: 'var(--lumx-color-dark-L1)',
+                        attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.7 } },
+                        $aliasedFrom: 'color.dark.L1',
+                    },
+                    'border-color': { value: 'transparent' },
+                },
+                'theme-dark': {
+                    'background-color': {
+                        value: 'var(--lumx-color-light-L5)',
+                        attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.2 } },
+                        $aliasedFrom: 'color.light.L5',
+                    },
+                    color: {
+                        value: 'var(--lumx-color-light-N)',
+                        attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
+                        $aliasedFrom: 'color.light.N',
+                    },
+                    'border-color': { value: 'transparent' },
+                },
+            },
+            'state-hover': {
+                padding: { horizontal: { value: '16px', $aliasedFrom: 'spacing.unit.big' } },
+                'border-width': { value: '0' },
+                'theme-light': {
+                    'background-color': {
+                        value: 'var(--lumx-color-dark-L4)',
+                        attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.2 } },
+                        $aliasedFrom: 'color.dark.L4',
+                    },
+                    color: {
+                        value: 'var(--lumx-color-dark-L1)',
+                        attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.7 } },
+                        $aliasedFrom: 'color.dark.L1',
+                    },
+                    'border-color': { value: 'transparent' },
+                },
+                'theme-dark': {
+                    'background-color': {
+                        value: 'var(--lumx-color-light-L4)',
+                        attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.4 } },
+                        $aliasedFrom: 'color.light.L4',
+                    },
+                    color: {
+                        value: 'var(--lumx-color-light-N)',
+                        attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
+                        $aliasedFrom: 'color.light.N',
+                    },
+                    'border-color': { value: 'transparent' },
+                },
+            },
+            'state-active': {
+                padding: { horizontal: { value: '16px', $aliasedFrom: 'spacing.unit.big' } },
+                'border-width': { value: '0' },
+                'theme-light': {
+                    'background-color': {
+                        value: 'var(--lumx-color-dark-L3)',
+                        attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.38 } },
+                        $aliasedFrom: 'color.dark.L3',
+                    },
+                    color: {
+                        value: 'var(--lumx-color-dark-L1)',
+                        attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.7 } },
+                        $aliasedFrom: 'color.dark.L1',
+                    },
+                    'border-color': { value: 'transparent' },
+                },
+                'theme-dark': {
+                    'background-color': {
+                        value: 'var(--lumx-color-light-L3)',
+                        attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.6 } },
+                        $aliasedFrom: 'color.light.L3',
+                    },
+                    color: {
+                        value: 'var(--lumx-color-light-N)',
+                        attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
+                        $aliasedFrom: 'color.light.N',
+                    },
+                    'border-color': { value: 'transparent' },
+                },
+            },
+        },
+        'emphasis-low': {
+            'state-default': {
+                padding: { horizontal: { value: '8px', $aliasedFrom: 'spacing.unit.regular' } },
+                'border-width': { value: '0' },
+                'theme-light': {
+                    'background-color': { value: 'transparent' },
+                    color: {
+                        value: 'var(--lumx-color-dark-L1)',
+                        attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.7 } },
+                        $aliasedFrom: 'color.dark.L1',
+                    },
+                    'border-color': { value: 'transparent' },
+                },
+                'theme-dark': {
+                    'background-color': { value: 'transparent' },
+                    color: {
+                        value: 'var(--lumx-color-light-N)',
+                        attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
+                        $aliasedFrom: 'color.light.N',
+                    },
+                    'border-color': { value: 'transparent' },
+                },
+            },
+            'state-hover': {
+                padding: { horizontal: { value: '8px', $aliasedFrom: 'spacing.unit.regular' } },
+                'border-width': { value: '0' },
+                'theme-light': {
+                    'background-color': {
+                        value: 'var(--lumx-color-dark-L5)',
+                        attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.12 } },
+                        $aliasedFrom: 'color.dark.L5',
+                    },
+                    color: {
+                        value: 'var(--lumx-color-dark-L1)',
+                        attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.7 } },
+                        $aliasedFrom: 'color.dark.L1',
+                    },
+                    'border-color': { value: 'transparent' },
+                },
+                'theme-dark': {
+                    'background-color': {
+                        value: 'var(--lumx-color-light-L5)',
+                        attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.2 } },
+                        $aliasedFrom: 'color.light.L5',
+                    },
+                    color: {
+                        value: 'var(--lumx-color-light-N)',
+                        attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
+                        $aliasedFrom: 'color.light.N',
+                    },
+                    'border-color': { value: 'transparent' },
+                },
+            },
+            'state-active': {
+                padding: { horizontal: { value: '8px', $aliasedFrom: 'spacing.unit.regular' } },
+                'border-width': { value: '0' },
+                'theme-light': {
+                    'background-color': {
+                        value: 'var(--lumx-color-dark-L4)',
+                        attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.2 } },
+                        $aliasedFrom: 'color.dark.L4',
+                    },
+                    color: {
+                        value: 'var(--lumx-color-dark-L1)',
+                        attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.7 } },
+                        $aliasedFrom: 'color.dark.L1',
+                    },
+                    'border-color': { value: 'transparent' },
+                },
+                'theme-dark': {
+                    'background-color': {
+                        value: 'var(--lumx-color-light-L4)',
+                        attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.4 } },
+                        $aliasedFrom: 'color.light.L4',
+                    },
+                    color: {
+                        value: 'var(--lumx-color-light-N)',
+                        attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
+                        $aliasedFrom: 'color.light.N',
+                    },
+                    'border-color': { value: 'transparent' },
+                },
+            },
+        },
+        'emphasis-selected': {
+            'state-default': {
+                padding: { horizontal: { value: '16px', $aliasedFrom: 'spacing.unit.big' } },
+                'border-width': { value: '0' },
+                'theme-light': {
+                    'background-color': {
+                        value: 'var(--lumx-color-primary-L5)',
+                        attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.1 } },
+                        $aliasedFrom: 'color.primary.L5',
+                    },
+                    color: {
+                        value: 'var(--lumx-color-primary-D2)',
+                        attributes: { hex: '1546c1', rgb: { r: 21, g: 70, b: 193, a: 1 } },
+                        $aliasedFrom: 'color.primary.D2',
+                    },
+                    'border-color': { value: 'transparent' },
+                },
+                'theme-dark': {
+                    'background-color': {
+                        value: 'var(--lumx-color-light-L3)',
+                        attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.6 } },
+                        $aliasedFrom: 'color.light.L3',
+                    },
+                    color: {
+                        value: 'var(--lumx-color-light-N)',
+                        attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
+                        $aliasedFrom: 'color.light.N',
+                    },
+                    'border-color': { value: 'transparent' },
+                },
+            },
+            'state-hover': {
+                padding: { horizontal: { value: '16px', $aliasedFrom: 'spacing.unit.big' } },
+                'border-width': { value: '0' },
+                'theme-light': {
+                    'background-color': {
+                        value: 'var(--lumx-color-primary-L4)',
+                        attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.2 } },
+                        $aliasedFrom: 'color.primary.L4',
+                    },
+                    color: {
+                        value: 'var(--lumx-color-primary-D2)',
+                        attributes: { hex: '1546c1', rgb: { r: 21, g: 70, b: 193, a: 1 } },
+                        $aliasedFrom: 'color.primary.D2',
+                    },
+                    'border-color': { value: 'transparent' },
+                },
+                'theme-dark': {
+                    'background-color': {
+                        value: 'var(--lumx-color-light-L4)',
+                        attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.4 } },
+                        $aliasedFrom: 'color.light.L4',
+                    },
+                    color: {
+                        value: 'var(--lumx-color-light-N)',
+                        attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
+                        $aliasedFrom: 'color.light.N',
+                    },
+                    'border-color': { value: 'transparent' },
+                },
+            },
+            'state-active': {
+                padding: { horizontal: { value: '16px', $aliasedFrom: 'spacing.unit.big' } },
+                'border-width': { value: '0' },
+                'theme-light': {
+                    'background-color': {
+                        value: 'var(--lumx-color-primary-L3)',
+                        attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.4 } },
+                        $aliasedFrom: 'color.primary.L3',
+                    },
+                    color: {
+                        value: 'var(--lumx-color-primary-D2)',
+                        attributes: { hex: '1546c1', rgb: { r: 21, g: 70, b: 193, a: 1 } },
+                        $aliasedFrom: 'color.primary.D2',
+                    },
+                    'border-color': { value: 'transparent' },
+                },
+                'theme-dark': {
+                    'background-color': {
+                        value: 'var(--lumx-color-light-L5)',
+                        attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.2 } },
+                        $aliasedFrom: 'color.light.L5',
+                    },
+                    color: {
+                        value: 'var(--lumx-color-light-N)',
+                        attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
+                        $aliasedFrom: 'color.light.N',
+                    },
+                    'border-color': { value: 'transparent' },
+                },
+            },
+        },
+    },
+    material: {
+        button: { 'text-transform': { value: 'none' } },
+        checkbox: { 'wrapper-size': { value: '20px' }, 'control-size': { value: '16px' } },
+        chip: {
+            'size-m': {
+                height: { value: '36px' },
+                'border-radius': { value: '18px' },
+                'padding-vertical': { value: '16px' },
+            },
+            'size-s': {
+                height: { value: '24px' },
+                'border-radius': { value: '12px' },
+                'padding-vertical': { value: '12px' },
+            },
+        },
+        'input-helper': {
+            'font-size': { value: '12px' },
+            'font-weight': { value: 'var(--lumx-typography-font-weight-regular)' },
+            'line-height': { value: '16px' },
+        },
+        'input-label': {
+            'font-size': { value: '14px' },
+            'font-weight': { value: 'var(--lumx-typography-font-weight-regular)' },
+            'line-height': { value: '20px' },
+        },
+        progress: { bounce: { value: 'block' }, rotate: { value: 'none' } },
+        'radio-button': {
+            'wrapper-size': { value: '20px' },
+            'control-size': { value: '16px' },
+            'indicator-size': { value: '8px' },
+        },
+        switch: {
+            wrapper: { width: { value: '30px' }, height: { value: '20px' } },
+            control: { width: { value: '30px' }, height: { value: '16px' } },
+            indicator: { size: { value: '8px' }, offset: { value: '4px' } },
+        },
+        'text-field': {
+            padding: { top: { value: '0' }, bottom: { value: '0' } },
+            header: {
+                wrapper: { 'margin-bottom': { value: '8px' } },
+                label: {
+                    'font-size': { value: '14px' },
+                    'font-weight': { value: 'var(--lumx-typography-font-weight-regular)' },
+                    'line-height': { value: '20px' },
+                },
+            },
+            input: {
+                content: {
+                    'font-size': { value: '14px' },
+                    'font-weight': { value: 'var(--lumx-typography-font-weight-regular)' },
+                    'line-height': { value: '20px' },
+                },
+            },
+        },
+    },
+    navigation: {
+        item: {
+            padding: { horizontal: { value: '8px', $aliasedFrom: 'spacing.unit.regular' } },
+            'min-height': { value: '36px', $aliasedFrom: 'size.m' },
+            'border-radius': { value: '4px', $aliasedFrom: 'border-radius' },
+            'emphasis-low': {
+                'state-default': {
+                    border: {
+                        top: { width: { value: '0' } },
+                        right: { width: { value: '0' } },
+                        bottom: { width: { value: '0' } },
+                        left: { width: { value: '0' } },
+                    },
+                    'theme-light': {
+                        'background-color': { value: 'transparent' },
+                        'border-color': {
+                            value: 'var(--lumx-color-dark-L5)',
+                            attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.12 } },
+                            $aliasedFrom: 'color.dark.L5',
+                        },
+                        'icon-color': {
+                            value: 'var(--lumx-color-dark-L1)',
+                            attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.7 } },
+                            $aliasedFrom: 'color.dark.L1',
+                        },
+                        'label-color': {
+                            value: 'var(--lumx-color-dark-N)',
+                            attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.87 } },
+                            $aliasedFrom: 'color.dark.N',
+                        },
+                        'chevron-background-color': { value: 'transparent' },
+                        'chevron-color': {
+                            value: 'var(--lumx-color-dark-L1)',
+                            attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.7 } },
+                            $aliasedFrom: 'color.dark.L1',
+                        },
+                    },
+                    'theme-dark': {
+                        'background-color': { value: 'transparent' },
+                        'border-color': {
+                            value: 'var(--lumx-color-light-L5)',
+                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.2 } },
+                            $aliasedFrom: 'color.light.L5',
+                        },
+                        'icon-color': {
+                            value: 'var(--lumx-color-light-N)',
+                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
+                            $aliasedFrom: 'color.light.N',
+                        },
+                        'label-color': {
+                            value: 'var(--lumx-color-light-N)',
+                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
+                            $aliasedFrom: 'color.light.N',
+                        },
+                        'chevron-background-color': { value: 'transparent' },
+                        'chevron-color': {
+                            value: 'var(--lumx-color-light-N)',
+                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
+                            $aliasedFrom: 'color.light.N',
+                        },
+                    },
+                },
+                'state-hover': {
+                    border: {
+                        top: { width: { value: '0' } },
+                        right: { width: { value: '0' } },
+                        bottom: { width: { value: '0' } },
+                        left: { width: { value: '0' } },
+                    },
+                    'theme-light': {
+                        'background-color': {
+                            value: 'var(--lumx-color-dark-L5)',
+                            attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.12 } },
+                            $aliasedFrom: 'color.dark.L5',
+                        },
+                        'border-color': {
+                            value: 'var(--lumx-color-dark-L5)',
+                            attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.12 } },
+                            $aliasedFrom: 'color.dark.L5',
+                        },
+                        'icon-color': {
+                            value: 'var(--lumx-color-dark-L1)',
+                            attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.7 } },
+                            $aliasedFrom: 'color.dark.L1',
+                        },
+                        'label-color': {
+                            value: 'var(--lumx-color-dark-N)',
+                            attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.87 } },
+                            $aliasedFrom: 'color.dark.N',
+                        },
+                        'chevron-background-color': {
+                            value: 'var(--lumx-color-dark-L5)',
+                            attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.12 } },
+                            $aliasedFrom: 'color.dark.L5',
+                        },
+                        'chevron-color': {
+                            value: 'var(--lumx-color-dark-L1)',
+                            attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.7 } },
+                            $aliasedFrom: 'color.dark.L1',
+                        },
+                    },
+                    'theme-dark': {
+                        'background-color': {
+                            value: 'var(--lumx-color-light-L5)',
+                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.2 } },
+                            $aliasedFrom: 'color.light.L5',
+                        },
+                        'border-color': {
+                            value: 'var(--lumx-color-light-L5)',
+                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.2 } },
+                            $aliasedFrom: 'color.light.L5',
+                        },
+                        'icon-color': {
+                            value: 'var(--lumx-color-light-N)',
+                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
+                            $aliasedFrom: 'color.light.N',
+                        },
+                        'label-color': {
+                            value: 'var(--lumx-color-light-N)',
+                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
+                            $aliasedFrom: 'color.light.N',
+                        },
+                        'chevron-background-color': {
+                            value: 'var(--lumx-color-light-L5)',
+                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.2 } },
+                            $aliasedFrom: 'color.light.L5',
+                        },
+                        'chevron-color': {
+                            value: 'var(--lumx-color-light-N)',
+                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
+                            $aliasedFrom: 'color.light.N',
+                        },
+                    },
+                },
+                'state-active': {
+                    border: {
+                        top: { width: { value: '0' } },
+                        right: { width: { value: '0' } },
+                        bottom: { width: { value: '0' } },
+                        left: { width: { value: '0' } },
+                    },
+                    'theme-light': {
+                        'background-color': {
+                            value: 'var(--lumx-color-dark-L4)',
+                            attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.2 } },
+                            $aliasedFrom: 'color.dark.L4',
+                        },
+                        'border-color': {
+                            value: 'var(--lumx-color-dark-L5)',
+                            attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.12 } },
+                            $aliasedFrom: 'color.dark.L5',
+                        },
+                        'icon-color': {
+                            value: 'var(--lumx-color-dark-L1)',
+                            attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.7 } },
+                            $aliasedFrom: 'color.dark.L1',
+                        },
+                        'label-color': {
+                            value: 'var(--lumx-color-dark-N)',
+                            attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.87 } },
+                            $aliasedFrom: 'color.dark.N',
+                        },
+                        'chevron-background-color': {
+                            value: 'var(--lumx-color-dark-L4)',
+                            attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.2 } },
+                            $aliasedFrom: 'color.dark.L4',
+                        },
+                        'chevron-color': {
+                            value: 'var(--lumx-color-dark-L1)',
+                            attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.7 } },
+                            $aliasedFrom: 'color.dark.L1',
+                        },
+                    },
+                    'theme-dark': {
+                        'background-color': {
+                            value: 'var(--lumx-color-light-L4)',
+                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.4 } },
+                            $aliasedFrom: 'color.light.L4',
+                        },
+                        'border-color': {
+                            value: 'var(--lumx-color-light-L5)',
+                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.2 } },
+                            $aliasedFrom: 'color.light.L5',
+                        },
+                        'icon-color': {
+                            value: 'var(--lumx-color-light-N)',
+                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
+                            $aliasedFrom: 'color.light.N',
+                        },
+                        'label-color': {
+                            value: 'var(--lumx-color-light-N)',
+                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
+                            $aliasedFrom: 'color.light.N',
+                        },
+                        'chevron-background-color': {
+                            value: 'var(--lumx-color-light-L4)',
+                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.4 } },
+                            $aliasedFrom: 'color.light.L4',
+                        },
+                        'chevron-color': {
+                            value: 'var(--lumx-color-light-N)',
+                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
+                            $aliasedFrom: 'color.light.N',
+                        },
+                    },
+                },
+            },
+            'emphasis-selected': {
+                'state-default': {
+                    border: {
+                        top: { width: { value: '0' } },
+                        right: { width: { value: '0' } },
+                        bottom: { width: { value: '0' } },
+                        left: { width: { value: '0' } },
+                    },
+                    'theme-light': {
+                        'background-color': {
+                            value: 'var(--lumx-color-primary-L5)',
+                            attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.1 } },
+                            $aliasedFrom: 'color.primary.L5',
+                        },
+                        'border-color': {
+                            value: 'var(--lumx-color-primary-N)',
+                            attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 1 } },
+                            $aliasedFrom: 'color.primary.N',
+                        },
+                        'icon-color': {
+                            value: 'var(--lumx-color-primary-D2)',
+                            attributes: { hex: '1546c1', rgb: { r: 21, g: 70, b: 193, a: 1 } },
+                            $aliasedFrom: 'color.primary.D2',
+                        },
+                        'label-color': {
+                            value: 'var(--lumx-color-primary-D2)',
+                            attributes: { hex: '1546c1', rgb: { r: 21, g: 70, b: 193, a: 1 } },
+                            $aliasedFrom: 'color.primary.D2',
+                        },
+                        'chevron-background-color': { value: 'transparent' },
+                        'chevron-color': {
+                            value: 'var(--lumx-color-primary-D2)',
+                            attributes: { hex: '1546c1', rgb: { r: 21, g: 70, b: 193, a: 1 } },
+                            $aliasedFrom: 'color.primary.D2',
+                        },
+                    },
+                    'theme-dark': {
+                        'background-color': {
+                            value: 'var(--lumx-color-light-L3)',
+                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.6 } },
+                            $aliasedFrom: 'color.light.L3',
+                        },
+                        'border-color': {
+                            value: 'var(--lumx-color-light-L5)',
+                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.2 } },
+                            $aliasedFrom: 'color.light.L5',
+                        },
+                        'icon-color': {
+                            value: 'var(--lumx-color-light-N)',
+                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
+                            $aliasedFrom: 'color.light.N',
+                        },
+                        'label-color': {
+                            value: 'var(--lumx-color-light-N)',
+                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
+                            $aliasedFrom: 'color.light.N',
+                        },
+                        'chevron-background-color': { value: 'transparent' },
+                        'chevron-color': {
+                            value: 'var(--lumx-color-light-N)',
+                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
+                            $aliasedFrom: 'color.light.N',
+                        },
+                    },
+                },
+                'state-hover': {
+                    border: {
+                        top: { width: { value: '0' } },
+                        right: { width: { value: '0' } },
+                        bottom: { width: { value: '0' } },
+                        left: { width: { value: '0' } },
+                    },
+                    'theme-light': {
+                        'background-color': {
+                            value: 'var(--lumx-color-primary-L4)',
+                            attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.2 } },
+                            $aliasedFrom: 'color.primary.L4',
+                        },
+                        'border-color': {
+                            value: 'var(--lumx-color-primary-N)',
+                            attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 1 } },
+                            $aliasedFrom: 'color.primary.N',
+                        },
+                        'icon-color': {
+                            value: 'var(--lumx-color-primary-D2)',
+                            attributes: { hex: '1546c1', rgb: { r: 21, g: 70, b: 193, a: 1 } },
+                            $aliasedFrom: 'color.primary.D2',
+                        },
+                        'label-color': {
+                            value: 'var(--lumx-color-primary-D2)',
+                            attributes: { hex: '1546c1', rgb: { r: 21, g: 70, b: 193, a: 1 } },
+                            $aliasedFrom: 'color.primary.D2',
+                        },
+                        'chevron-background-color': {
+                            value: 'var(--lumx-color-primary-L4)',
+                            attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.2 } },
+                            $aliasedFrom: 'color.primary.L4',
+                        },
+                        'chevron-color': {
+                            value: 'var(--lumx-color-primary-D2)',
+                            attributes: { hex: '1546c1', rgb: { r: 21, g: 70, b: 193, a: 1 } },
+                            $aliasedFrom: 'color.primary.D2',
+                        },
+                    },
+                    'theme-dark': {
+                        'background-color': {
+                            value: 'var(--lumx-color-light-L4)',
+                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.4 } },
+                            $aliasedFrom: 'color.light.L4',
+                        },
+                        'border-color': {
+                            value: 'var(--lumx-color-light-L5)',
+                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.2 } },
+                            $aliasedFrom: 'color.light.L5',
+                        },
+                        'icon-color': {
+                            value: 'var(--lumx-color-light-N)',
+                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
+                            $aliasedFrom: 'color.light.N',
+                        },
+                        'label-color': {
+                            value: 'var(--lumx-color-light-N)',
+                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
+                            $aliasedFrom: 'color.light.N',
+                        },
+                        'chevron-background-color': {
+                            value: 'var(--lumx-color-light-L4)',
+                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.4 } },
+                            $aliasedFrom: 'color.light.L4',
+                        },
+                        'chevron-color': {
+                            value: 'var(--lumx-color-light-N)',
+                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
+                            $aliasedFrom: 'color.light.N',
+                        },
+                    },
+                },
+                'state-active': {
+                    border: {
+                        top: { width: { value: '0' } },
+                        right: { width: { value: '0' } },
+                        bottom: { width: { value: '0' } },
+                        left: { width: { value: '0' } },
+                    },
+                    'theme-light': {
+                        'background-color': {
+                            value: 'var(--lumx-color-primary-L3)',
+                            attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.4 } },
+                            $aliasedFrom: 'color.primary.L3',
+                        },
+                        'border-color': {
+                            value: 'var(--lumx-color-primary-N)',
+                            attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 1 } },
+                            $aliasedFrom: 'color.primary.N',
+                        },
+                        'icon-color': {
+                            value: 'var(--lumx-color-primary-D2)',
+                            attributes: { hex: '1546c1', rgb: { r: 21, g: 70, b: 193, a: 1 } },
+                            $aliasedFrom: 'color.primary.D2',
+                        },
+                        'label-color': {
+                            value: 'var(--lumx-color-primary-D2)',
+                            attributes: { hex: '1546c1', rgb: { r: 21, g: 70, b: 193, a: 1 } },
+                            $aliasedFrom: 'color.primary.D2',
+                        },
+                        'chevron-background-color': {
+                            value: 'var(--lumx-color-primary-L3)',
+                            attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.4 } },
+                            $aliasedFrom: 'color.primary.L3',
+                        },
+                        'chevron-color': {
+                            value: 'var(--lumx-color-primary-D2)',
+                            attributes: { hex: '1546c1', rgb: { r: 21, g: 70, b: 193, a: 1 } },
+                            $aliasedFrom: 'color.primary.D2',
+                        },
+                    },
+                    'theme-dark': {
+                        'background-color': {
+                            value: 'var(--lumx-color-light-L5)',
+                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.2 } },
+                            $aliasedFrom: 'color.light.L5',
+                        },
+                        'border-color': {
+                            value: 'var(--lumx-color-light-L5)',
+                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.2 } },
+                            $aliasedFrom: 'color.light.L5',
+                        },
+                        'icon-color': {
+                            value: 'var(--lumx-color-light-N)',
+                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
+                            $aliasedFrom: 'color.light.N',
+                        },
+                        'label-color': {
+                            value: 'var(--lumx-color-light-N)',
+                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
+                            $aliasedFrom: 'color.light.N',
+                        },
+                        'chevron-background-color': {
+                            value: 'var(--lumx-color-light-L5)',
+                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.2 } },
+                            $aliasedFrom: 'color.light.L5',
+                        },
+                        'chevron-color': {
+                            value: 'var(--lumx-color-light-N)',
+                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
+                            $aliasedFrom: 'color.light.N',
+                        },
+                    },
+                },
+            },
+        },
+    },
+    tabs: {
+        link: {
+            height: { value: '48px' },
+            'border-radius': { value: '0' },
+            'emphasis-low': {
+                'state-default': {
+                    border: {
+                        top: { width: { value: '0' } },
+                        right: { width: { value: '0' } },
+                        bottom: { width: { value: '2px' } },
+                        left: { width: { value: '0' } },
+                    },
+                    'theme-light': {
+                        'background-color': { value: 'transparent' },
+                        color: {
+                            value: 'var(--lumx-color-dark-L1)',
+                            attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.7 } },
+                            $aliasedFrom: 'color.dark.L1',
+                        },
+                        'border-color': {
+                            value: 'var(--lumx-color-dark-L5)',
+                            attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.12 } },
+                            $aliasedFrom: 'color.dark.L5',
+                        },
+                    },
+                    'theme-dark': {
+                        'background-color': { value: 'transparent' },
+                        color: {
+                            value: 'var(--lumx-color-light-N)',
+                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
+                            $aliasedFrom: 'color.light.N',
+                        },
+                        'border-color': {
+                            value: 'var(--lumx-color-light-L5)',
+                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.2 } },
+                            $aliasedFrom: 'color.light.L5',
+                        },
+                    },
+                },
+                'state-hover': {
+                    border: {
+                        top: { width: { value: '0' } },
+                        right: { width: { value: '0' } },
+                        bottom: { width: { value: '2px' } },
+                        left: { width: { value: '0' } },
+                    },
+                    'theme-light': {
+                        'background-color': {
+                            value: 'var(--lumx-color-dark-L5)',
+                            attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.12 } },
+                            $aliasedFrom: 'color.dark.L5',
+                        },
+                        color: {
+                            value: 'var(--lumx-color-dark-L1)',
+                            attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.7 } },
+                            $aliasedFrom: 'color.dark.L1',
+                        },
+                        'border-color': {
+                            value: 'var(--lumx-color-dark-L5)',
+                            attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.12 } },
+                            $aliasedFrom: 'color.dark.L5',
+                        },
+                    },
+                    'theme-dark': {
+                        'background-color': {
+                            value: 'var(--lumx-color-light-L5)',
+                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.2 } },
+                            $aliasedFrom: 'color.light.L5',
+                        },
+                        color: {
+                            value: 'var(--lumx-color-light-N)',
+                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
+                            $aliasedFrom: 'color.light.N',
+                        },
+                        'border-color': {
+                            value: 'var(--lumx-color-light-L5)',
+                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.2 } },
+                            $aliasedFrom: 'color.light.L5',
+                        },
+                    },
+                },
+                'state-active': {
+                    border: {
+                        top: { width: { value: '0' } },
+                        right: { width: { value: '0' } },
+                        bottom: { width: { value: '2px' } },
+                        left: { width: { value: '0' } },
+                    },
+                    'theme-light': {
+                        'background-color': {
+                            value: 'var(--lumx-color-dark-L4)',
+                            attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.2 } },
+                            $aliasedFrom: 'color.dark.L4',
+                        },
+                        color: {
+                            value: 'var(--lumx-color-dark-L1)',
+                            attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.7 } },
+                            $aliasedFrom: 'color.dark.L1',
+                        },
+                        'border-color': {
+                            value: 'var(--lumx-color-dark-L5)',
+                            attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.12 } },
+                            $aliasedFrom: 'color.dark.L5',
+                        },
+                    },
+                    'theme-dark': {
+                        'background-color': {
+                            value: 'var(--lumx-color-light-L4)',
+                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.4 } },
+                            $aliasedFrom: 'color.light.L4',
+                        },
+                        color: {
+                            value: 'var(--lumx-color-light-N)',
+                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
+                            $aliasedFrom: 'color.light.N',
+                        },
+                        'border-color': {
+                            value: 'var(--lumx-color-light-L5)',
+                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.2 } },
+                            $aliasedFrom: 'color.light.L5',
+                        },
+                    },
+                },
+            },
+            'emphasis-selected': {
+                'state-default': {
+                    border: {
+                        top: { width: { value: '0' } },
+                        right: { width: { value: '0' } },
+                        bottom: { width: { value: '2px' } },
+                        left: { width: { value: '0' } },
+                    },
+                    'theme-light': {
+                        'background-color': { value: 'transparent' },
+                        color: {
+                            value: 'var(--lumx-color-dark-L1)',
+                            attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.7 } },
+                            $aliasedFrom: 'color.dark.L1',
+                        },
+                        'border-color': {
+                            value: 'var(--lumx-color-primary-N)',
+                            attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 1 } },
+                            $aliasedFrom: 'color.primary.N',
+                        },
+                    },
+                    'theme-dark': {
+                        'background-color': { value: 'transparent' },
+                        color: {
+                            value: 'var(--lumx-color-light-N)',
+                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
+                            $aliasedFrom: 'color.light.N',
+                        },
+                        'border-color': {
+                            value: 'var(--lumx-color-light-N)',
+                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
+                            $aliasedFrom: 'color.light.N',
+                        },
+                    },
+                },
+                'state-hover': {
+                    border: {
+                        top: { width: { value: '0' } },
+                        right: { width: { value: '0' } },
+                        bottom: { width: { value: '2px' } },
+                        left: { width: { value: '0' } },
+                    },
+                    'theme-light': {
+                        'background-color': {
+                            value: 'var(--lumx-color-dark-L5)',
+                            attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.12 } },
+                            $aliasedFrom: 'color.dark.L5',
+                        },
+                        color: {
+                            value: 'var(--lumx-color-dark-L1)',
+                            attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.7 } },
+                            $aliasedFrom: 'color.dark.L1',
+                        },
+                        'border-color': {
+                            value: 'var(--lumx-color-primary-N)',
+                            attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 1 } },
+                            $aliasedFrom: 'color.primary.N',
+                        },
+                    },
+                    'theme-dark': {
+                        'background-color': {
+                            value: 'var(--lumx-color-light-L5)',
+                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.2 } },
+                            $aliasedFrom: 'color.light.L5',
+                        },
+                        color: {
+                            value: 'var(--lumx-color-light-N)',
+                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
+                            $aliasedFrom: 'color.light.N',
+                        },
+                        'border-color': {
+                            value: 'var(--lumx-color-light-N)',
+                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
+                            $aliasedFrom: 'color.light.N',
+                        },
+                    },
+                },
+                'state-active': {
+                    border: {
+                        top: { width: { value: '0' } },
+                        right: { width: { value: '0' } },
+                        bottom: { width: { value: '2px' } },
+                        left: { width: { value: '0' } },
+                    },
+                    'theme-light': {
+                        'background-color': {
+                            value: 'var(--lumx-color-dark-L4)',
+                            attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.2 } },
+                            $aliasedFrom: 'color.dark.L4',
+                        },
+                        color: {
+                            value: 'var(--lumx-color-dark-L1)',
+                            attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.7 } },
+                            $aliasedFrom: 'color.dark.L1',
+                        },
+                        'border-color': {
+                            value: 'var(--lumx-color-primary-N)',
+                            attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 1 } },
+                            $aliasedFrom: 'color.primary.N',
+                        },
+                    },
+                    'theme-dark': {
+                        'background-color': {
+                            value: 'var(--lumx-color-light-L4)',
+                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.4 } },
+                            $aliasedFrom: 'color.light.L4',
+                        },
+                        color: {
+                            value: 'var(--lumx-color-light-N)',
+                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
+                            $aliasedFrom: 'color.light.N',
+                        },
+                        'border-color': {
+                            value: 'var(--lumx-color-light-N)',
+                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
+                            $aliasedFrom: 'color.light.N',
+                        },
+                    },
+                },
+            },
+        },
+    },
+    'text-field': {
+        input: {
+            'min-height': { value: '36px', $aliasedFrom: 'size.m' },
+            padding: { horizontal: { value: '12px', $aliasedFrom: 'spacing.unit.medium' } },
+            'border-radius': { value: '4px', $aliasedFrom: 'border-radius' },
+        },
+        'state-default': {
+            input: {
+                border: {
+                    top: { width: { value: '1px' } },
+                    right: { width: { value: '1px' } },
+                    bottom: { width: { value: '1px' } },
+                    left: { width: { value: '1px' } },
+                },
+            },
+            'theme-light': {
+                header: {
+                    label: {
+                        color: {
+                            value: 'var(--lumx-color-dark-N)',
+                            attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.87 } },
+                            $aliasedFrom: 'color.dark.N',
+                        },
+                    },
+                },
+                input: {
+                    'background-color': {
+                        value: 'var(--lumx-color-dark-L6)',
+                        attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.05 } },
+                        $aliasedFrom: 'color.dark.L6',
+                    },
+                    'border-color': {
+                        value: 'var(--lumx-color-dark-L4)',
+                        attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.2 } },
+                        $aliasedFrom: 'color.dark.L4',
+                    },
+                    content: {
+                        color: {
+                            value: 'var(--lumx-color-dark-N)',
+                            attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.87 } },
+                            $aliasedFrom: 'color.dark.N',
+                        },
+                    },
+                    placeholder: {
+                        color: {
+                            value: 'var(--lumx-color-dark-L2)',
+                            attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.54 } },
+                            $aliasedFrom: 'color.dark.L2',
+                        },
+                    },
+                },
+            },
+            'theme-dark': {
+                header: {
+                    label: {
+                        color: {
+                            value: 'var(--lumx-color-light-N)',
+                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
+                            $aliasedFrom: 'color.light.N',
+                        },
+                    },
+                },
+                input: {
+                    'background-color': {
+                        value: 'var(--lumx-color-light-L6)',
+                        attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.1 } },
+                        $aliasedFrom: 'color.light.L6',
+                    },
+                    'border-color': {
+                        value: 'var(--lumx-color-light-L4)',
+                        attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.4 } },
+                        $aliasedFrom: 'color.light.L4',
+                    },
+                    content: {
+                        color: {
+                            value: 'var(--lumx-color-light-N)',
+                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
+                            $aliasedFrom: 'color.light.N',
+                        },
+                    },
+                    placeholder: {
+                        color: {
+                            value: 'var(--lumx-color-light-L2)',
+                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.8 } },
+                            $aliasedFrom: 'color.light.L2',
+                        },
+                    },
+                },
+            },
+        },
+        'state-hover': {
+            input: {
+                border: {
+                    top: { width: { value: '1px' } },
+                    right: { width: { value: '1px' } },
+                    bottom: { width: { value: '1px' } },
+                    left: { width: { value: '1px' } },
+                },
+            },
+            'theme-light': {
+                header: {
+                    label: {
+                        color: {
+                            value: 'var(--lumx-color-dark-N)',
+                            attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.87 } },
+                            $aliasedFrom: 'color.dark.N',
+                        },
+                    },
+                },
+                input: {
+                    'background-color': {
+                        value: 'var(--lumx-color-dark-L5)',
+                        attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.12 } },
+                        $aliasedFrom: 'color.dark.L5',
+                    },
+                    'border-color': {
+                        value: 'var(--lumx-color-dark-L4)',
+                        attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.2 } },
+                        $aliasedFrom: 'color.dark.L4',
+                    },
+                    content: {
+                        color: {
+                            value: 'var(--lumx-color-dark-N)',
+                            attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.87 } },
+                            $aliasedFrom: 'color.dark.N',
+                        },
+                    },
+                    placeholder: {
+                        color: {
+                            value: 'var(--lumx-color-dark-L2)',
+                            attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.54 } },
+                            $aliasedFrom: 'color.dark.L2',
+                        },
+                    },
+                },
+            },
+            'theme-dark': {
+                header: {
+                    label: {
+                        color: {
+                            value: 'var(--lumx-color-light-N)',
+                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
+                            $aliasedFrom: 'color.light.N',
+                        },
+                    },
+                },
+                input: {
+                    'background-color': {
+                        value: 'var(--lumx-color-light-L5)',
+                        attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.2 } },
+                        $aliasedFrom: 'color.light.L5',
+                    },
+                    'border-color': {
+                        value: 'var(--lumx-color-light-L4)',
+                        attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.4 } },
+                        $aliasedFrom: 'color.light.L4',
+                    },
+                    content: {
+                        color: {
+                            value: 'var(--lumx-color-light-N)',
+                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
+                            $aliasedFrom: 'color.light.N',
+                        },
+                    },
+                    placeholder: {
+                        color: {
+                            value: 'var(--lumx-color-light-L2)',
+                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.8 } },
+                            $aliasedFrom: 'color.light.L2',
+                        },
+                    },
+                },
+            },
+        },
+        'state-focus': {
+            input: {
+                border: {
+                    top: { width: { value: '2px' } },
+                    right: { width: { value: '2px' } },
+                    bottom: { width: { value: '2px' } },
+                    left: { width: { value: '2px' } },
+                },
+            },
+            'theme-light': {
+                header: {
+                    label: {
+                        color: {
+                            value: 'var(--lumx-color-dark-N)',
+                            attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.87 } },
+                            $aliasedFrom: 'color.dark.N',
+                        },
+                    },
+                },
+                input: {
+                    'background-color': {
+                        value: 'var(--lumx-color-light-N)',
+                        attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
+                        $aliasedFrom: 'color.light.N',
+                    },
+                    'border-color': {
+                        value: 'var(--lumx-color-primary-N)',
+                        attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 1 } },
+                        $aliasedFrom: 'color.primary.N',
+                    },
+                    content: {
+                        color: {
+                            value: 'var(--lumx-color-dark-N)',
+                            attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.87 } },
+                            $aliasedFrom: 'color.dark.N',
+                        },
+                    },
+                    placeholder: {
+                        color: {
+                            value: 'var(--lumx-color-dark-L2)',
+                            attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.54 } },
+                            $aliasedFrom: 'color.dark.L2',
+                        },
+                    },
+                },
+            },
+            'theme-dark': {
+                header: {
+                    label: {
+                        color: {
+                            value: 'var(--lumx-color-light-N)',
+                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
+                            $aliasedFrom: 'color.light.N',
+                        },
+                    },
+                },
+                input: {
+                    'background-color': { value: 'transparent' },
+                    'border-color': {
+                        value: 'var(--lumx-color-light-N)',
+                        attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
+                        $aliasedFrom: 'color.light.N',
+                    },
+                    content: {
+                        color: {
+                            value: 'var(--lumx-color-light-N)',
+                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
+                            $aliasedFrom: 'color.light.N',
+                        },
+                    },
+                    placeholder: {
+                        color: {
+                            value: 'var(--lumx-color-light-L2)',
+                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.8 } },
+                            $aliasedFrom: 'color.light.L2',
+                        },
+                    },
+                },
+            },
+        },
+    },
+    'border-radius': { value: '4px' },
+    color: {
+        dark: {
+            N: {
+                version: '0.22',
+                comment: 'Neutral dark color',
+                value: 'rgba(0, 0, 0, 0.87)',
+                attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.87 } },
+            },
+            L1: {
+                version: '0.22',
+                comment: 'Base dark color with 70% opacity',
+                value: 'rgba(0, 0, 0, 0.7)',
+                attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.7 } },
+            },
+            L2: {
+                version: '0.22',
+                comment: 'Base dark color with 54% opacity',
+                value: 'rgba(0, 0, 0, 0.54)',
+                attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.54 } },
+            },
+            L3: {
+                version: '0.22',
+                comment: 'Base dark color with 38% opacity',
+                value: 'rgba(0, 0, 0, 0.38)',
+                attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.38 } },
+            },
+            L4: {
+                version: '0.22',
+                comment: 'Base dark color with 20% opacity',
+                value: 'rgba(0, 0, 0, 0.2)',
+                attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.2 } },
+            },
+            L5: {
+                version: '0.22',
+                comment: 'Base dark color with 12% opacity',
+                value: 'rgba(0, 0, 0, 0.12)',
+                attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.12 } },
+            },
+            L6: {
+                version: '0.22',
+                comment: 'Base dark color with 5% opacity',
+                value: 'rgba(0, 0, 0, 0.05)',
+                attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.05 } },
+            },
+        },
+        light: {
+            N: {
+                version: '0.22',
+                comment: 'Neutral light color',
+                value: 'rgb(255, 255, 255)',
+                attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
+            },
+            L1: {
+                version: '0.22',
+                comment: 'Base light color with 90% opacity',
+                value: 'rgba(255, 255, 255, 0.9)',
+                attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.9 } },
+            },
+            L2: {
+                version: '0.22',
+                comment: 'Base light color with 80% opacity',
+                value: 'rgba(255, 255, 255, 0.8)',
+                attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.8 } },
+            },
+            L3: {
+                version: '0.22',
+                comment: 'Base light color with 60% opacity',
+                value: 'rgba(255, 255, 255, 0.6)',
+                attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.6 } },
+            },
+            L4: {
+                version: '0.22',
+                comment: 'Base light color with 40% opacity',
+                value: 'rgba(255, 255, 255, 0.4)',
+                attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.4 } },
+            },
+            L5: {
+                version: '0.22',
+                comment: 'Base light color with 20% opacity',
+                value: 'rgba(255, 255, 255, 0.2)',
+                attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.2 } },
+            },
+            L6: {
+                version: '0.22',
+                comment: 'Base light color with 10% opacity',
+                value: 'rgba(255, 255, 255, 0.1)',
+                attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.1 } },
+            },
+        },
+        blue: {
+            D2: {
+                version: '0.22',
+                comment: 'Darkest blue color',
+                value: 'rgb(21, 70, 193)',
+                attributes: { hex: '1546c1', rgb: { r: 21, g: 70, b: 193, a: 1 } },
+            },
+            D1: {
+                version: '0.22',
+                comment: 'Dark blue color',
+                value: 'rgb(24, 78, 216)',
+                attributes: { hex: '184ed8', rgb: { r: 24, g: 78, b: 216, a: 1 } },
+            },
+            N: {
+                version: '0.22',
+                comment: 'Neutral blue color',
+                value: 'rgb(36, 91, 231)',
+                attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 1 } },
+            },
+            L1: {
+                version: '0.22',
+                comment: 'Base blue color with 80% opacity',
+                value: 'rgba(36, 91, 231, 0.8)',
+                attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.8 } },
+            },
+            L2: {
+                version: '0.22',
+                comment: 'Base blue color with 60% opacity',
+                value: 'rgba(36, 91, 231, 0.6)',
+                attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.6 } },
+            },
+            L3: {
+                version: '0.22',
+                comment: 'Base blue color with 40% opacity',
+                value: 'rgba(36, 91, 231, 0.4)',
+                attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.4 } },
+            },
+            L4: {
+                version: '0.22',
+                comment: 'Base blue color with 20% opacity',
+                value: 'rgba(36, 91, 231, 0.2)',
+                attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.2 } },
+            },
+            L5: {
+                version: '0.22',
+                comment: 'Base blue color with 10% opacity',
+                value: 'rgba(36, 91, 231, 0.1)',
+                attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.1 } },
+            },
+            L6: {
+                version: '0.22',
+                comment: 'Base blue color with 5% opacity',
+                value: 'rgba(36, 91, 231, 0.05)',
+                attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.05 } },
+            },
+        },
+        green: {
+            D2: {
+                version: '0.22',
+                comment: 'Darkest green color',
+                value: 'rgb(26, 110, 89)',
+                attributes: { hex: '1a6e59', rgb: { r: 26, g: 110, b: 89, a: 1 } },
+            },
+            D1: {
+                version: '0.22',
+                comment: 'Dark green color',
+                value: 'rgb(23, 122, 97)',
+                attributes: { hex: '177a61', rgb: { r: 23, g: 122, b: 97, a: 1 } },
+            },
+            N: {
+                version: '0.22',
+                comment: 'Neutral green color',
+                value: 'rgb(19, 134, 105)',
+                attributes: { hex: '138669', rgb: { r: 19, g: 134, b: 105, a: 1 } },
+            },
+            L1: {
+                version: '0.22',
+                comment: 'Base green color with 80% opacity',
+                value: 'rgba(19, 134, 105, 0.8)',
+                attributes: { hex: '138669', rgb: { r: 19, g: 134, b: 105, a: 0.8 } },
+            },
+            L2: {
+                version: '0.22',
+                comment: 'Base green color with 60% opacity',
+                value: 'rgba(19, 134, 105, 0.6)',
+                attributes: { hex: '138669', rgb: { r: 19, g: 134, b: 105, a: 0.6 } },
+            },
+            L3: {
+                version: '0.22',
+                comment: 'Base green color with 40% opacity',
+                value: 'rgba(19, 134, 105, 0.4)',
+                attributes: { hex: '138669', rgb: { r: 19, g: 134, b: 105, a: 0.4 } },
+            },
+            L4: {
+                version: '0.22',
+                comment: 'Base green color with 20% opacity',
+                value: 'rgba(19, 134, 105, 0.2)',
+                attributes: { hex: '138669', rgb: { r: 19, g: 134, b: 105, a: 0.2 } },
+            },
+            L5: {
+                version: '0.22',
+                comment: 'Base green color with 10% opacity',
+                value: 'rgba(19, 134, 105, 0.1)',
+                attributes: { hex: '138669', rgb: { r: 19, g: 134, b: 105, a: 0.1 } },
+            },
+            L6: {
+                version: '0.22',
+                comment: 'Base green color with 5% opacity',
+                value: 'rgba(19, 134, 105, 0.05)',
+                attributes: { hex: '138669', rgb: { r: 19, g: 134, b: 105, a: 0.05 } },
+            },
+        },
+        yellow: {
+            D2: {
+                version: '0.22',
+                comment: 'Darkest yellow color',
+                value: 'rgb(255, 161, 37)',
+                attributes: { hex: 'ffa125', rgb: { r: 255, g: 161, b: 37, a: 1 } },
+            },
+            D1: {
+                version: '0.22',
+                comment: 'Dark yellow color',
+                value: 'rgb(255, 179, 37)',
+                attributes: { hex: 'ffb325', rgb: { r: 255, g: 179, b: 37, a: 1 } },
+            },
+            N: {
+                version: '0.22',
+                comment: 'Neutral yellow color',
+                value: 'rgb(255, 196, 37)',
+                attributes: { hex: 'ffc425', rgb: { r: 255, g: 196, b: 37, a: 1 } },
+            },
+            L1: {
+                version: '0.22',
+                comment: 'Base yellow color with 80% opacity',
+                value: 'rgba(255, 196, 37, 0.9)',
+                attributes: { hex: 'ffc425', rgb: { r: 255, g: 196, b: 37, a: 0.9 } },
+            },
+            L2: {
+                version: '0.22',
+                comment: 'Base yellow color with 70% opacity',
+                value: 'rgba(255, 196, 37, 0.8)',
+                attributes: { hex: 'ffc425', rgb: { r: 255, g: 196, b: 37, a: 0.8 } },
+            },
+            L3: {
+                version: '0.22',
+                comment: 'Base yellow color with 60% opacity',
+                value: 'rgba(255, 196, 37, 0.6)',
+                attributes: { hex: 'ffc425', rgb: { r: 255, g: 196, b: 37, a: 0.6 } },
+            },
+            L4: {
+                version: '0.22',
+                comment: 'Base yellow color with 40% opacity',
+                value: 'rgba(255, 196, 37, 0.48)',
+                attributes: { hex: 'ffc425', rgb: { r: 255, g: 196, b: 37, a: 0.48 } },
+            },
+            L5: {
+                version: '0.22',
+                comment: 'Base yellow color with 20% opacity',
+                value: 'rgba(255, 196, 37, 0.24)',
+                attributes: { hex: 'ffc425', rgb: { r: 255, g: 196, b: 37, a: 0.24 } },
+            },
+            L6: {
+                version: '0.22',
+                comment: 'Base yellow color with 10% opacity',
+                value: 'rgba(255, 196, 37, 0.12)',
+                attributes: { hex: 'ffc425', rgb: { r: 255, g: 196, b: 37, a: 0.12 } },
+            },
+        },
+        red: {
+            D2: {
+                version: '0.22',
+                comment: 'Darkest red color',
+                value: 'rgb(190, 30, 70)',
+                attributes: { hex: 'be1e46', rgb: { r: 190, g: 30, b: 70, a: 1 } },
+            },
+            D1: {
+                version: '0.22',
+                comment: 'Dark red color',
+                value: 'rgb(212, 33, 72)',
+                attributes: { hex: 'd42148', rgb: { r: 212, g: 33, b: 72, a: 1 } },
+            },
+            N: {
+                version: '0.22',
+                comment: 'Neutral red color',
+                value: 'rgb(223, 48, 80)',
+                attributes: { hex: 'df3050', rgb: { r: 223, g: 48, b: 80, a: 1 } },
+            },
+            L1: {
+                version: '0.22',
+                comment: 'Base red color with 80% opacity',
+                value: 'rgba(223, 48, 80, 0.8)',
+                attributes: { hex: 'df3050', rgb: { r: 223, g: 48, b: 80, a: 0.8 } },
+            },
+            L2: {
+                version: '0.22',
+                comment: 'Base red color with 60% opacity',
+                value: 'rgba(223, 48, 80, 0.6)',
+                attributes: { hex: 'df3050', rgb: { r: 223, g: 48, b: 80, a: 0.6 } },
+            },
+            L3: {
+                version: '0.22',
+                comment: 'Base red color with 40% opacity',
+                value: 'rgba(223, 48, 80, 0.4)',
+                attributes: { hex: 'df3050', rgb: { r: 223, g: 48, b: 80, a: 0.4 } },
+            },
+            L4: {
+                version: '0.22',
+                comment: 'Base red color with 20% opacity',
+                value: 'rgba(223, 48, 80, 0.2)',
+                attributes: { hex: 'df3050', rgb: { r: 223, g: 48, b: 80, a: 0.2 } },
+            },
+            L5: {
+                version: '0.22',
+                comment: 'Base red color with 10% opacity',
+                value: 'rgba(223, 48, 80, 0.1)',
+                attributes: { hex: 'df3050', rgb: { r: 223, g: 48, b: 80, a: 0.1 } },
+            },
+            L6: {
+                version: '0.22',
+                comment: 'Base red color with 5% opacity',
+                value: 'rgba(223, 48, 80, 0.05)',
+                attributes: { hex: 'df3050', rgb: { r: 223, g: 48, b: 80, a: 0.05 } },
+            },
+        },
+        grey: {
+            N: {
+                version: '0.22',
+                comment: 'Neutral grey color',
+                value: 'rgb(117, 117, 117)',
+                attributes: { hex: '757575', rgb: { r: 117, g: 117, b: 117, a: 1 } },
+            },
+            L1: {
+                version: '0.22',
+                comment: 'Base grey color with 80% opacity',
+                value: 'rgba(117, 117, 117, 0.8)',
+                attributes: { hex: '757575', rgb: { r: 117, g: 117, b: 117, a: 0.8 } },
+            },
+            L2: {
+                version: '0.22',
+                comment: 'Base grey color with 60% opacity',
+                value: 'rgba(117, 117, 117, 0.6)',
+                attributes: { hex: '757575', rgb: { r: 117, g: 117, b: 117, a: 0.6 } },
+            },
+            L3: {
+                version: '0.22',
+                comment: 'Base grey color with 40% opacity',
+                value: 'rgba(117, 117, 117, 0.4)',
+                attributes: { hex: '757575', rgb: { r: 117, g: 117, b: 117, a: 0.4 } },
+            },
+            L4: {
+                version: '0.22',
+                comment: 'Base grey color with 20% opacity',
+                value: 'rgba(117, 117, 117, 0.2)',
+                attributes: { hex: '757575', rgb: { r: 117, g: 117, b: 117, a: 0.2 } },
+            },
+            L5: {
+                version: '0.22',
+                comment: 'Base grey color with 10% opacity',
+                value: 'rgba(117, 117, 117, 0.1)',
+                attributes: { hex: '757575', rgb: { r: 117, g: 117, b: 117, a: 0.1 } },
+            },
+            L6: {
+                version: '0.22',
+                comment: 'Base grey color with 5% opacity',
+                value: 'rgba(117, 117, 117, 0.05)',
+                attributes: { hex: '757575', rgb: { r: 117, g: 117, b: 117, a: 0.05 } },
+            },
+        },
+        primary: {
+            D2: {
+                version: '0.22',
+                comment: 'Darkest blue color',
+                value: 'rgb(21, 70, 193)',
+                attributes: { hex: '1546c1', rgb: { r: 21, g: 70, b: 193, a: 1 } },
+            },
+            D1: {
+                version: '0.22',
+                comment: 'Dark blue color',
+                value: 'rgb(24, 78, 216)',
+                attributes: { hex: '184ed8', rgb: { r: 24, g: 78, b: 216, a: 1 } },
+            },
+            N: {
+                version: '0.22',
+                comment: 'Neutral blue color',
+                value: 'rgb(36, 91, 231)',
+                attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 1 } },
+            },
+            L1: {
+                version: '0.22',
+                comment: 'Base blue color with 80% opacity',
+                value: 'rgba(36, 91, 231, 0.8)',
+                attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.8 } },
+            },
+            L2: {
+                version: '0.22',
+                comment: 'Base blue color with 60% opacity',
+                value: 'rgba(36, 91, 231, 0.6)',
+                attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.6 } },
+            },
+            L3: {
+                version: '0.22',
+                comment: 'Base blue color with 40% opacity',
+                value: 'rgba(36, 91, 231, 0.4)',
+                attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.4 } },
+            },
+            L4: {
+                version: '0.22',
+                comment: 'Base blue color with 20% opacity',
+                value: 'rgba(36, 91, 231, 0.2)',
+                attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.2 } },
+            },
+            L5: {
+                version: '0.22',
+                comment: 'Base blue color with 10% opacity',
+                value: 'rgba(36, 91, 231, 0.1)',
+                attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.1 } },
+            },
+            L6: {
+                version: '0.22',
+                comment: 'Base blue color with 5% opacity',
+                value: 'rgba(36, 91, 231, 0.05)',
+                attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.05 } },
+            },
+        },
+        secondary: {
+            D2: {
+                version: '0.22',
+                comment: 'Darkest green color',
+                value: 'rgb(26, 110, 89)',
+                attributes: { hex: '1a6e59', rgb: { r: 26, g: 110, b: 89, a: 1 } },
+            },
+            D1: {
+                version: '0.22',
+                comment: 'Dark green color',
+                value: 'rgb(23, 122, 97)',
+                attributes: { hex: '177a61', rgb: { r: 23, g: 122, b: 97, a: 1 } },
+            },
+            N: {
+                version: '0.22',
+                comment: 'Neutral green color',
+                value: 'rgb(19, 134, 105)',
+                attributes: { hex: '138669', rgb: { r: 19, g: 134, b: 105, a: 1 } },
+            },
+            L1: {
+                version: '0.22',
+                comment: 'Base green color with 80% opacity',
+                value: 'rgba(19, 134, 105, 0.8)',
+                attributes: { hex: '138669', rgb: { r: 19, g: 134, b: 105, a: 0.8 } },
+            },
+            L2: {
+                version: '0.22',
+                comment: 'Base green color with 60% opacity',
+                value: 'rgba(19, 134, 105, 0.6)',
+                attributes: { hex: '138669', rgb: { r: 19, g: 134, b: 105, a: 0.6 } },
+            },
+            L3: {
+                version: '0.22',
+                comment: 'Base green color with 40% opacity',
+                value: 'rgba(19, 134, 105, 0.4)',
+                attributes: { hex: '138669', rgb: { r: 19, g: 134, b: 105, a: 0.4 } },
+            },
+            L4: {
+                version: '0.22',
+                comment: 'Base green color with 20% opacity',
+                value: 'rgba(19, 134, 105, 0.2)',
+                attributes: { hex: '138669', rgb: { r: 19, g: 134, b: 105, a: 0.2 } },
+            },
+            L5: {
+                version: '0.22',
+                comment: 'Base green color with 10% opacity',
+                value: 'rgba(19, 134, 105, 0.1)',
+                attributes: { hex: '138669', rgb: { r: 19, g: 134, b: 105, a: 0.1 } },
+            },
+            L6: {
+                version: '0.22',
+                comment: 'Base green color with 5% opacity',
+                value: 'rgba(19, 134, 105, 0.05)',
+                attributes: { hex: '138669', rgb: { r: 19, g: 134, b: 105, a: 0.05 } },
+            },
+        },
+        accent: {
+            D2: {
+                version: '0.22',
+                comment: 'Darkest green color',
+                value: 'rgb(26, 110, 89)',
+                attributes: { hex: '1a6e59', rgb: { r: 26, g: 110, b: 89, a: 1 } },
+            },
+            D1: {
+                version: '0.22',
+                comment: 'Dark green color',
+                value: 'rgb(23, 122, 97)',
+                attributes: { hex: '177a61', rgb: { r: 23, g: 122, b: 97, a: 1 } },
+            },
+            N: {
+                version: '0.22',
+                comment: 'Neutral green color',
+                value: 'rgb(19, 134, 105)',
+                attributes: { hex: '138669', rgb: { r: 19, g: 134, b: 105, a: 1 } },
+            },
+            L1: {
+                version: '0.22',
+                comment: 'Base green color with 80% opacity',
+                value: 'rgba(19, 134, 105, 0.8)',
+                attributes: { hex: '138669', rgb: { r: 19, g: 134, b: 105, a: 0.8 } },
+            },
+            L2: {
+                version: '0.22',
+                comment: 'Base green color with 60% opacity',
+                value: 'rgba(19, 134, 105, 0.6)',
+                attributes: { hex: '138669', rgb: { r: 19, g: 134, b: 105, a: 0.6 } },
+            },
+            L3: {
+                version: '0.22',
+                comment: 'Base green color with 40% opacity',
+                value: 'rgba(19, 134, 105, 0.4)',
+                attributes: { hex: '138669', rgb: { r: 19, g: 134, b: 105, a: 0.4 } },
+            },
+            L4: {
+                version: '0.22',
+                comment: 'Base green color with 20% opacity',
+                value: 'rgba(19, 134, 105, 0.2)',
+                attributes: { hex: '138669', rgb: { r: 19, g: 134, b: 105, a: 0.2 } },
+            },
+            L5: {
+                version: '0.22',
+                comment: 'Base green color with 10% opacity',
+                value: 'rgba(19, 134, 105, 0.1)',
+                attributes: { hex: '138669', rgb: { r: 19, g: 134, b: 105, a: 0.1 } },
+            },
+            L6: {
+                version: '0.22',
+                comment: 'Base green color with 5% opacity',
+                value: 'rgba(19, 134, 105, 0.05)',
+                attributes: { hex: '138669', rgb: { r: 19, g: 134, b: 105, a: 0.05 } },
+            },
+        },
+        black: {
+            N: {
+                version: '0.22',
+                comment: 'Neutral dark color',
+                value: 'rgba(0, 0, 0, 0.87)',
+                attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.87 } },
+            },
+            L1: {
+                version: '0.22',
+                comment: 'Base dark color with 70% opacity',
+                value: 'rgba(0, 0, 0, 0.7)',
+                attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.7 } },
+            },
+            L2: {
+                version: '0.22',
+                comment: 'Base dark color with 54% opacity',
+                value: 'rgba(0, 0, 0, 0.54)',
+                attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.54 } },
+            },
+            L3: {
+                version: '0.22',
+                comment: 'Base dark color with 38% opacity',
+                value: 'rgba(0, 0, 0, 0.38)',
+                attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.38 } },
+            },
+            L4: {
+                version: '0.22',
+                comment: 'Base dark color with 20% opacity',
+                value: 'rgba(0, 0, 0, 0.2)',
+                attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.2 } },
+            },
+            L5: {
+                version: '0.22',
+                comment: 'Base dark color with 12% opacity',
+                value: 'rgba(0, 0, 0, 0.12)',
+                attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.12 } },
+            },
+            L6: {
+                version: '0.22',
+                comment: 'Base dark color with 5% opacity',
+                value: 'rgba(0, 0, 0, 0.05)',
+                attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.05 } },
+            },
+        },
+        white: {
+            N: {
+                version: '0.22',
+                comment: 'Neutral light color',
+                value: 'rgb(255, 255, 255)',
+                attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
+            },
+            L1: {
+                version: '0.22',
+                comment: 'Base light color with 90% opacity',
+                value: 'rgba(255, 255, 255, 0.9)',
+                attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.9 } },
+            },
+            L2: {
+                version: '0.22',
+                comment: 'Base light color with 80% opacity',
+                value: 'rgba(255, 255, 255, 0.8)',
+                attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.8 } },
+            },
+            L3: {
+                version: '0.22',
+                comment: 'Base light color with 60% opacity',
+                value: 'rgba(255, 255, 255, 0.6)',
+                attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.6 } },
+            },
+            L4: {
+                version: '0.22',
+                comment: 'Base light color with 40% opacity',
+                value: 'rgba(255, 255, 255, 0.4)',
+                attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.4 } },
+            },
+            L5: {
+                version: '0.22',
+                comment: 'Base light color with 20% opacity',
+                value: 'rgba(255, 255, 255, 0.2)',
+                attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.2 } },
+            },
+            L6: {
+                version: '0.22',
+                comment: 'Base light color with 10% opacity',
+                value: 'rgba(255, 255, 255, 0.1)',
+                attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.1 } },
+            },
+        },
+        orange: {
+            D2: {
+                version: '0.22',
+                comment: 'Darkest yellow color',
+                value: 'rgb(255, 161, 37)',
+                attributes: { hex: 'ffa125', rgb: { r: 255, g: 161, b: 37, a: 1 } },
+            },
+            D1: {
+                version: '0.22',
+                comment: 'Dark yellow color',
+                value: 'rgb(255, 179, 37)',
+                attributes: { hex: 'ffb325', rgb: { r: 255, g: 179, b: 37, a: 1 } },
+            },
+            N: {
+                version: '0.22',
+                comment: 'Neutral yellow color',
+                value: 'rgb(255, 196, 37)',
+                attributes: { hex: 'ffc425', rgb: { r: 255, g: 196, b: 37, a: 1 } },
+            },
+            L1: {
+                version: '0.22',
+                comment: 'Base yellow color with 80% opacity',
+                value: 'rgba(255, 196, 37, 0.9)',
+                attributes: { hex: 'ffc425', rgb: { r: 255, g: 196, b: 37, a: 0.9 } },
+            },
+            L2: {
+                version: '0.22',
+                comment: 'Base yellow color with 70% opacity',
+                value: 'rgba(255, 196, 37, 0.8)',
+                attributes: { hex: 'ffc425', rgb: { r: 255, g: 196, b: 37, a: 0.8 } },
+            },
+            L3: {
+                version: '0.22',
+                comment: 'Base yellow color with 60% opacity',
+                value: 'rgba(255, 196, 37, 0.6)',
+                attributes: { hex: 'ffc425', rgb: { r: 255, g: 196, b: 37, a: 0.6 } },
+            },
+            L4: {
+                version: '0.22',
+                comment: 'Base yellow color with 40% opacity',
+                value: 'rgba(255, 196, 37, 0.48)',
+                attributes: { hex: 'ffc425', rgb: { r: 255, g: 196, b: 37, a: 0.48 } },
+            },
+            L5: {
+                version: '0.22',
+                comment: 'Base yellow color with 20% opacity',
+                value: 'rgba(255, 196, 37, 0.24)',
+                attributes: { hex: 'ffc425', rgb: { r: 255, g: 196, b: 37, a: 0.24 } },
+            },
+            L6: {
+                version: '0.22',
+                comment: 'Base yellow color with 10% opacity',
+                value: 'rgba(255, 196, 37, 0.12)',
+                attributes: { hex: 'ffc425', rgb: { r: 255, g: 196, b: 37, a: 0.12 } },
+            },
+        },
+    },
+    size: {
+        xxs: { value: '14px' },
+        xs: { value: '20px' },
+        s: { value: '24px' },
+        m: { value: '36px' },
+        l: { value: '64px' },
+        xl: { value: '128px' },
+        xxl: { value: '256px' },
+    },
+    spacing: {
+        unit: {
+            tiny: { value: '4px' },
+            regular: { value: '8px' },
+            medium: { value: '12px' },
+            big: { value: '16px' },
+            huge: { value: '24px' },
+        },
+    },
+    typography: {
+        'font-family': {
+            value:
+                "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
+        },
+        'font-weight': { regular: { value: '400' }, bold: { value: '700' }, light: { value: '300' } },
+        interface: {
+            display1: {
+                'font-size': { value: '34px' },
+                'font-weight': { value: 'var(--lumx-typography-font-weight-bold)' },
+                'line-height': { value: '40px' },
+            },
+            headline: {
+                'font-size': { value: '24px' },
+                'font-weight': { value: 'var(--lumx-typography-font-weight-bold)' },
+                'line-height': { value: '32px' },
+            },
+            title: {
+                'font-size': { value: '20px' },
+                'font-weight': { value: 'var(--lumx-typography-font-weight-bold)' },
+                'line-height': { value: '30px' },
+            },
+            subtitle2: {
+                'font-size': { value: '16px' },
+                'font-weight': { value: 'var(--lumx-typography-font-weight-bold)' },
+                'line-height': { value: '24px' },
+            },
+            subtitle1: {
+                'font-size': { value: '14px' },
+                'font-weight': { value: 'var(--lumx-typography-font-weight-bold)' },
+                'line-height': { value: '20px' },
+            },
+            body2: {
+                'font-size': { value: '16px' },
+                'font-weight': { value: 'var(--lumx-typography-font-weight-regular)' },
+                'line-height': { value: '24px' },
+            },
+            body1: {
+                'font-size': { value: '14px' },
+                'font-weight': { value: 'var(--lumx-typography-font-weight-regular)' },
+                'line-height': { value: '20px' },
+            },
+            caption: {
+                'font-size': { value: '12px' },
+                'font-weight': { value: 'var(--lumx-typography-font-weight-regular)' },
+                'line-height': { value: '16px' },
+            },
+            overline: {
+                'font-size': { value: '10px' },
+                'font-weight': { value: 'var(--lumx-typography-font-weight-bold)' },
+                'line-height': { value: '12px' },
+            },
+        },
+        custom: {
+            title1: {
+                'font-size': { value: '40px' },
+                'font-weight': { value: 'var(--lumx-typography-font-weight-bold)' },
+                'line-height': { value: '50px' },
+            },
+            title2: {
+                'font-size': { value: '30px' },
+                'font-weight': { value: 'var(--lumx-typography-font-weight-bold)' },
+                'line-height': { value: '40px' },
+            },
+            title3: {
+                'font-size': { value: '24px' },
+                'font-weight': { value: 'var(--lumx-typography-font-weight-bold)' },
+                'line-height': { value: '32px' },
+            },
+            title4: {
+                'font-size': { value: '20px' },
+                'font-weight': { value: 'var(--lumx-typography-font-weight-bold)' },
+                'line-height': { value: '30px' },
+            },
+            title5: {
+                'font-size': { value: '16px' },
+                'font-weight': { value: 'var(--lumx-typography-font-weight-bold)' },
+                'line-height': { value: '24px' },
+            },
+            title6: {
+                'font-size': { value: '14px' },
+                'font-weight': { value: 'var(--lumx-typography-font-weight-bold)' },
+                'line-height': { value: '20px' },
+            },
+            intro: {
+                'font-size': { value: '18px' },
+                'font-weight': { value: 'var(--lumx-typography-font-weight-bold)' },
+                'line-height': { value: '30px' },
+            },
+            'body-large': {
+                'font-size': { value: '16px' },
+                'font-weight': { value: 'var(--lumx-typography-font-weight-regular)' },
+                'line-height': { value: '24px' },
+            },
+            body: {
+                'font-size': { value: '14px' },
+                'font-weight': { value: 'var(--lumx-typography-font-weight-regular)' },
+                'line-height': { value: '20px' },
+            },
+            quote: {
+                'font-size': { value: '16px' },
+                'font-weight': { value: 'var(--lumx-typography-font-weight-regular)' },
+                'font-style': { value: 'italic' },
+                'line-height': { value: '24px' },
+            },
+            'publish-info': {
+                'font-size': { value: '14px' },
+                'font-weight': { value: 'var(--lumx-typography-font-weight-regular)' },
+                'line-height': { value: '20px' },
+            },
+            button: {
+                'size-m': {
+                    'font-size': { value: '14px' },
+                    'font-weight': { value: 'var(--lumx-typography-font-weight-bold)' },
+                },
+                'size-s': {
+                    'font-size': { value: '12px' },
+                    'font-weight': { value: 'var(--lumx-typography-font-weight-bold)' },
+                },
+            },
+        },
+    },
+};