create-yss-spec 1.0.0

package/template/docs/design/tokens/tokens.default.json

@@ -0,0 +1,251 @@
+{
+  "algorithm": "default",
+  "colorPrimary": "#1677ff",
+  "colorPrimaryBg": "#e6f4ff",
+  "colorPrimaryBgHover": "#bae0ff",
+  "colorPrimaryBorder": "#91caff",
+  "colorPrimaryBorderHover": "#69b1ff",
+  "colorPrimaryHover": "#4096ff",
+  "colorPrimaryActive": "#0958d9",
+  "colorPrimaryText": "#002c8c",
+  "colorSuccess": "#52c41a",
+  "colorSuccessBg": "#f6ffed",
+  "colorSuccessBorder": "#b6eb8f",
+  "colorSuccessHover": "#72d13d",
+  "colorSuccessActive": "#389e0d",
+  "colorWarning": "#faad14",
+  "colorWarningBg": "#fffbe6",
+  "colorWarningBorder": "#ffe58f",
+  "colorWarningHover": "#ffc53d",
+  "colorWarningActive": "#d48806",
+  "colorError": "#ff4d4f",
+  "colorErrorBg": "#fff2f0",
+  "colorErrorBorder": "#ffccc7",
+  "colorErrorHover": "#ff7875",
+  "colorErrorActive": "#d9363d",
+  "colorInfo": "#1677ff",
+  "colorInfoBg": "#e6f4ff",
+  "colorInfoBorder": "#91caff",
+  "colorLink": "#1677ff",
+  "colorLinkHover": "#4096ff",
+  "colorLinkActive": "#0958d9",
+  "colorText": "#2e2e2e",
+  "colorTextSecondary": "#646464",
+  "colorTextTertiary": "#949494",
+  "colorTextQuaternary": "#c4c4c4",
+  "colorFill": "#dbdbdb",
+  "colorFillSecondary": "#f1f1f1",
+  "colorFillTertiary": "#f5f5f5",
+  "colorFillQuaternary": "#fafafa",
+  "colorBgLayout": "#f5f5f5",
+  "colorBgContainer": "#ffffff",
+  "colorBgElevated": "#ffffff",
+  "colorBorder": "#dbdbdb",
+  "colorBorderSecondary": "#f1f1f1",
+  "fontFamily": "Inter, system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'",
+  "fontFamilyCode": "'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace",
+  "fontSize": 14,
+  "fontSizeSM": 12,
+  "fontSizeLG": 18,
+  "fontSizeXL": 22,
+  "fontSizeHeading1": 38,
+  "fontSizeHeading2": 32,
+  "fontSizeHeading3": 26,
+  "fontSizeHeading4": 22,
+  "fontSizeHeading5": 18,
+  "lineHeight": 1.5714285714285714,
+  "lineHeightHeading": 1.25,
+  "fontWeightStrong": 600,
+  "sizeXXS": 4,
+  "sizeXS": 8,
+  "sizeSM": 12,
+  "size": 16,
+  "sizeMD": 20,
+  "sizeLG": 24,
+  "sizeXL": 32,
+  "sizeXXL": 48,
+  "borderRadiusXS": 3,
+  "borderRadiusSM": 5,
+  "borderRadius": 8,
+  "borderRadiusLG": 10,
+  "lineWidth": 1,
+  "controlHeightXS": 16,
+  "controlHeightSM": 24,
+  "controlHeight": 32,
+  "controlHeightLG": 40,
+  "motionDurationFast": "0.1s",
+  "motionDurationMid": "0.2s",
+  "motionDurationSlow": "0.3s",
+  "motionEaseInOut": "cubic-bezier(0.645, 0.045, 0.355, 1)",
+  "motionEaseOut": "cubic-bezier(0.215, 0.61, 0.355, 1)",
+  "primaryPalette": [
+    "#e6f4ff",
+    "#bae0ff",
+    "#91caff",
+    "#69b1ff",
+    "#4096ff",
+    "#1677ff",
+    "#0958d9",
+    "#003eb3",
+    "#002c8c",
+    "#001d66"
+  ],
+  "presets": {
+    "red": [
+      "#fff1f0",
+      "#ffcbc7",
+      "#ffa39e",
+      "#ff7775",
+      "#ff4d50",
+      "#f5222d",
+      "#cf1323",
+      "#a8071a",
+      "#820014",
+      "#5c0011"
+    ],
+    "volcano": [
+      "#fff2e8",
+      "#ffd8bf",
+      "#ffbb96",
+      "#ff9c6e",
+      "#ff7a45",
+      "#fa541c",
+      "#d4380d",
+      "#ad2202",
+      "#871500",
+      "#610c00"
+    ],
+    "orange": [
+      "#fff7e6",
+      "#ffe7ba",
+      "#ffd591",
+      "#ffc069",
+      "#ffa940",
+      "#fa8c16",
+      "#d46b08",
+      "#ad4e00",
+      "#873800",
+      "#612500"
+    ],
+    "gold": [
+      "#fffbe6",
+      "#fff1b8",
+      "#ffe58f",
+      "#ffd666",
+      "#ffc53d",
+      "#faad14",
+      "#d48806",
+      "#ad6800",
+      "#874c00",
+      "#613400"
+    ],
+    "yellow": [
+      "#feffe6",
+      "#ffffb8",
+      "#fffb8f",
+      "#fff566",
+      "#ffeb3d",
+      "#fadb14",
+      "#d4b106",
+      "#ad8a00",
+      "#876700",
+      "#614700"
+    ],
+    "lime": [
+      "#fcffe6",
+      "#f4ffb8",
+      "#eaff8f",
+      "#d3f261",
+      "#bae637",
+      "#a0d911",
+      "#7bb305",
+      "#5b8c00",
+      "#3f6600",
+      "#254000"
+    ],
+    "green": [
+      "#f6ffed",
+      "#d9f7be",
+      "#b6eb8f",
+      "#94de64",
+      "#72d13d",
+      "#52c41a",
+      "#389e0d",
+      "#227804",
+      "#135200",
+      "#092b00"
+    ],
+    "cyan": [
+      "#e6fffb",
+      "#b5f5ec",
+      "#87e8de",
+      "#5cdbd3",
+      "#36cfc9",
+      "#13c2c2",
+      "#08979c",
+      "#006d75",
+      "#00474f",
+      "#002329"
+    ],
+    "blue": [
+      "#e6f4ff",
+      "#bae0ff",
+      "#91caff",
+      "#69b1ff",
+      "#4096ff",
+      "#1677ff",
+      "#0958d9",
+      "#003eb3",
+      "#002c8c",
+      "#001d66"
+    ],
+    "geekblue": [
+      "#f0f5ff",
+      "#d6e4ff",
+      "#adc6ff",
+      "#85a5ff",
+      "#597df7",
+      "#2f54eb",
+      "#1d39c4",
+      "#10229e",
+      "#061178",
+      "#030852"
+    ],
+    "purple": [
+      "#f9f0ff",
+      "#efdbff",
+      "#d4adf7",
+      "#b37feb",
+      "#9254de",
+      "#722ed1",
+      "#531dab",
+      "#391085",
+      "#22075e",
+      "#120338"
+    ],
+    "magenta": [
+      "#fff0f6",
+      "#ffd6e7",
+      "#ffadd2",
+      "#ff85bf",
+      "#f759aa",
+      "#eb2f96",
+      "#c41d7e",
+      "#9e1067",
+      "#780650",
+      "#520339"
+    ],
+    "grey": [
+      "#a6a6a6",
+      "#999999",
+      "#8c8c8c",
+      "#808080",
+      "#737373",
+      "#666666",
+      "#404040",
+      "#1a1a1a",
+      "#000000",
+      "#000000"
+    ]
+  }
+}

package/template/docs/design/tokens/variables.css

@@ -0,0 +1,441 @@
+:root {
+  --brand-color-primary: #1677ff;
+  --brand-color-primary-bg: #e6f4ff;
+  --brand-color-primary-bg-hover: #bae0ff;
+  --brand-color-primary-border: #91caff;
+  --brand-color-primary-border-hover: #69b1ff;
+  --brand-color-primary-hover: #4096ff;
+  --brand-color-primary-active: #0958d9;
+  --brand-color-primary-text: #002c8c;
+  --brand-color-success: #52c41a;
+  --brand-color-success-bg: #f6ffed;
+  --brand-color-success-border: #b6eb8f;
+  --brand-color-success-hover: #72d13d;
+  --brand-color-success-active: #389e0d;
+  --brand-color-warning: #faad14;
+  --brand-color-warning-bg: #fffbe6;
+  --brand-color-warning-border: #ffe58f;
+  --brand-color-warning-hover: #ffc53d;
+  --brand-color-warning-active: #d48806;
+  --brand-color-error: #ff4d4f;
+  --brand-color-error-bg: #fff2f0;
+  --brand-color-error-border: #ffccc7;
+  --brand-color-error-hover: #ff7875;
+  --brand-color-error-active: #d9363d;
+  --brand-color-info: #1677ff;
+  --brand-color-info-bg: #e6f4ff;
+  --brand-color-info-border: #91caff;
+  --brand-color-link: #1677ff;
+  --brand-color-link-hover: #4096ff;
+  --brand-color-link-active: #0958d9;
+  --brand-color-text: #2e2e2e;
+  --brand-color-text-secondary: #646464;
+  --brand-color-text-tertiary: #949494;
+  --brand-color-text-quaternary: #c4c4c4;
+  --brand-color-fill: #dbdbdb;
+  --brand-color-fill-secondary: #f1f1f1;
+  --brand-color-fill-tertiary: #f5f5f5;
+  --brand-color-fill-quaternary: #fafafa;
+  --brand-color-bg-layout: #f5f5f5;
+  --brand-color-bg-container: #ffffff;
+  --brand-color-bg-elevated: #ffffff;
+  --brand-color-border: #dbdbdb;
+  --brand-color-border-secondary: #f1f1f1;
+  --brand-font-family: Inter, system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --brand-font-family-code: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+  --brand-font-size: 14px;
+  --brand-font-size-sm: 12px;
+  --brand-font-size-lg: 18px;
+  --brand-font-size-xl: 22px;
+  --brand-font-size-heading-1: 38px;
+  --brand-font-size-heading-2: 32px;
+  --brand-font-size-heading-3: 26px;
+  --brand-font-size-heading-4: 22px;
+  --brand-font-size-heading-5: 18px;
+  --brand-line-height: 1.5714285714285714;
+  --brand-line-height-heading: 1.25;
+  --brand-font-weight-strong: 600;
+  --brand-size-xxs: 4px;
+  --brand-size-xs: 8px;
+  --brand-size-sm: 12px;
+  --brand-size: 16px;
+  --brand-size-md: 20px;
+  --brand-size-lg: 24px;
+  --brand-size-xl: 32px;
+  --brand-size-xxl: 48px;
+  --brand-border-radius-xs: 3px;
+  --brand-border-radius-sm: 5px;
+  --brand-border-radius: 8px;
+  --brand-border-radius-lg: 10px;
+  --brand-line-width: 1px;
+  --brand-control-height-xs: 16px;
+  --brand-control-height-sm: 24px;
+  --brand-control-height: 32px;
+  --brand-control-height-lg: 40px;
+  --brand-motion-duration-fast: 0.1s;
+  --brand-motion-duration-mid: 0.2s;
+  --brand-motion-duration-slow: 0.3s;
+  --brand-motion-ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
+  --brand-motion-ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
+  --brand-primary-palette-1: #e6f4ff;
+  --brand-primary-palette-2: #bae0ff;
+  --brand-primary-palette-3: #91caff;
+  --brand-primary-palette-4: #69b1ff;
+  --brand-primary-palette-5: #4096ff;
+  --brand-primary-palette-6: #1677ff;
+  --brand-primary-palette-7: #0958d9;
+  --brand-primary-palette-8: #003eb3;
+  --brand-primary-palette-9: #002c8c;
+  --brand-primary-palette-10: #001d66;
+  --brand-presets-red-1: #fff1f0;
+  --brand-presets-red-2: #ffcbc7;
+  --brand-presets-red-3: #ffa39e;
+  --brand-presets-red-4: #ff7775;
+  --brand-presets-red-5: #ff4d50;
+  --brand-presets-red-6: #f5222d;
+  --brand-presets-red-7: #cf1323;
+  --brand-presets-red-8: #a8071a;
+  --brand-presets-red-9: #820014;
+  --brand-presets-red-10: #5c0011;
+  --brand-presets-volcano-1: #fff2e8;
+  --brand-presets-volcano-2: #ffd8bf;
+  --brand-presets-volcano-3: #ffbb96;
+  --brand-presets-volcano-4: #ff9c6e;
+  --brand-presets-volcano-5: #ff7a45;
+  --brand-presets-volcano-6: #fa541c;
+  --brand-presets-volcano-7: #d4380d;
+  --brand-presets-volcano-8: #ad2202;
+  --brand-presets-volcano-9: #871500;
+  --brand-presets-volcano-10: #610c00;
+  --brand-presets-orange-1: #fff7e6;
+  --brand-presets-orange-2: #ffe7ba;
+  --brand-presets-orange-3: #ffd591;
+  --brand-presets-orange-4: #ffc069;
+  --brand-presets-orange-5: #ffa940;
+  --brand-presets-orange-6: #fa8c16;
+  --brand-presets-orange-7: #d46b08;
+  --brand-presets-orange-8: #ad4e00;
+  --brand-presets-orange-9: #873800;
+  --brand-presets-orange-10: #612500;
+  --brand-presets-gold-1: #fffbe6;
+  --brand-presets-gold-2: #fff1b8;
+  --brand-presets-gold-3: #ffe58f;
+  --brand-presets-gold-4: #ffd666;
+  --brand-presets-gold-5: #ffc53d;
+  --brand-presets-gold-6: #faad14;
+  --brand-presets-gold-7: #d48806;
+  --brand-presets-gold-8: #ad6800;
+  --brand-presets-gold-9: #874c00;
+  --brand-presets-gold-10: #613400;
+  --brand-presets-yellow-1: #feffe6;
+  --brand-presets-yellow-2: #ffffb8;
+  --brand-presets-yellow-3: #fffb8f;
+  --brand-presets-yellow-4: #fff566;
+  --brand-presets-yellow-5: #ffeb3d;
+  --brand-presets-yellow-6: #fadb14;
+  --brand-presets-yellow-7: #d4b106;
+  --brand-presets-yellow-8: #ad8a00;
+  --brand-presets-yellow-9: #876700;
+  --brand-presets-yellow-10: #614700;
+  --brand-presets-lime-1: #fcffe6;
+  --brand-presets-lime-2: #f4ffb8;
+  --brand-presets-lime-3: #eaff8f;
+  --brand-presets-lime-4: #d3f261;
+  --brand-presets-lime-5: #bae637;
+  --brand-presets-lime-6: #a0d911;
+  --brand-presets-lime-7: #7bb305;
+  --brand-presets-lime-8: #5b8c00;
+  --brand-presets-lime-9: #3f6600;
+  --brand-presets-lime-10: #254000;
+  --brand-presets-green-1: #f6ffed;
+  --brand-presets-green-2: #d9f7be;
+  --brand-presets-green-3: #b6eb8f;
+  --brand-presets-green-4: #94de64;
+  --brand-presets-green-5: #72d13d;
+  --brand-presets-green-6: #52c41a;
+  --brand-presets-green-7: #389e0d;
+  --brand-presets-green-8: #227804;
+  --brand-presets-green-9: #135200;
+  --brand-presets-green-10: #092b00;
+  --brand-presets-cyan-1: #e6fffb;
+  --brand-presets-cyan-2: #b5f5ec;
+  --brand-presets-cyan-3: #87e8de;
+  --brand-presets-cyan-4: #5cdbd3;
+  --brand-presets-cyan-5: #36cfc9;
+  --brand-presets-cyan-6: #13c2c2;
+  --brand-presets-cyan-7: #08979c;
+  --brand-presets-cyan-8: #006d75;
+  --brand-presets-cyan-9: #00474f;
+  --brand-presets-cyan-10: #002329;
+  --brand-presets-blue-1: #e6f4ff;
+  --brand-presets-blue-2: #bae0ff;
+  --brand-presets-blue-3: #91caff;
+  --brand-presets-blue-4: #69b1ff;
+  --brand-presets-blue-5: #4096ff;
+  --brand-presets-blue-6: #1677ff;
+  --brand-presets-blue-7: #0958d9;
+  --brand-presets-blue-8: #003eb3;
+  --brand-presets-blue-9: #002c8c;
+  --brand-presets-blue-10: #001d66;
+  --brand-presets-geekblue-1: #f0f5ff;
+  --brand-presets-geekblue-2: #d6e4ff;
+  --brand-presets-geekblue-3: #adc6ff;
+  --brand-presets-geekblue-4: #85a5ff;
+  --brand-presets-geekblue-5: #597df7;
+  --brand-presets-geekblue-6: #2f54eb;
+  --brand-presets-geekblue-7: #1d39c4;
+  --brand-presets-geekblue-8: #10229e;
+  --brand-presets-geekblue-9: #061178;
+  --brand-presets-geekblue-10: #030852;
+  --brand-presets-purple-1: #f9f0ff;
+  --brand-presets-purple-2: #efdbff;
+  --brand-presets-purple-3: #d4adf7;
+  --brand-presets-purple-4: #b37feb;
+  --brand-presets-purple-5: #9254de;
+  --brand-presets-purple-6: #722ed1;
+  --brand-presets-purple-7: #531dab;
+  --brand-presets-purple-8: #391085;
+  --brand-presets-purple-9: #22075e;
+  --brand-presets-purple-10: #120338;
+  --brand-presets-magenta-1: #fff0f6;
+  --brand-presets-magenta-2: #ffd6e7;
+  --brand-presets-magenta-3: #ffadd2;
+  --brand-presets-magenta-4: #ff85bf;
+  --brand-presets-magenta-5: #f759aa;
+  --brand-presets-magenta-6: #eb2f96;
+  --brand-presets-magenta-7: #c41d7e;
+  --brand-presets-magenta-8: #9e1067;
+  --brand-presets-magenta-9: #780650;
+  --brand-presets-magenta-10: #520339;
+  --brand-presets-grey-1: #a6a6a6;
+  --brand-presets-grey-2: #999999;
+  --brand-presets-grey-3: #8c8c8c;
+  --brand-presets-grey-4: #808080;
+  --brand-presets-grey-5: #737373;
+  --brand-presets-grey-6: #666666;
+  --brand-presets-grey-7: #404040;
+  --brand-presets-grey-8: #1a1a1a;
+  --brand-presets-grey-9: #000000;
+  --brand-presets-grey-10: #000000;
+}
+
+.dark {
+  --brand-color-primary: #3983dc;
+  --brand-color-primary-bg: #121e32;
+  --brand-color-primary-bg-hover: #152d4f;
+  --brand-color-primary-border: #213b5b;
+  --brand-color-primary-border-hover: #284f7e;
+  --brand-color-primary-hover: #61a1e8;
+  --brand-color-primary-active: #3169ad;
+  --brand-color-primary-text: #b5daf8;
+  --brand-color-success: #64b537;
+  --brand-color-success-bg: #192913;
+  --brand-color-success-border: #304d20;
+  --brand-color-success-hover: #87ca5c;
+  --brand-color-success-active: #518f2f;
+  --brand-color-warning: #dcaa37;
+  --brand-color-warning-bg: #312512;
+  --brand-color-warning-border: #5b4920;
+  --brand-color-warning-hover: #e8c35e;
+  --brand-color-warning-active: #ad872f;
+  --brand-color-error: #dc6966;
+  --brand-color-error-bg: #32191a;
+  --brand-color-error-border: #5b3231;
+  --brand-color-error-hover: #e89590;
+  --brand-color-error-active: #ad5553;
+  --brand-color-info: #3983dc;
+  --brand-color-info-bg: #121e32;
+  --brand-color-info-border: #213b5b;
+  --brand-color-link: #3983dc;
+  --brand-color-link-hover: #61a1e8;
+  --brand-color-link-active: #3169ad;
+  --brand-color-text: #dcdcdc;
+  --brand-color-text-secondary: #adadad;
+  --brand-color-text-tertiary: #7e7e7e;
+  --brand-color-text-quaternary: #4f4f4f;
+  --brand-color-fill: #3e3e3e;
+  --brand-color-fill-secondary: #303030;
+  --brand-color-fill-tertiary: #272727;
+  --brand-color-fill-quaternary: #1d1d1d;
+  --brand-color-bg-layout: #1d1d1d;
+  --brand-color-bg-container: #141414;
+  --brand-color-bg-elevated: #272727;
+  --brand-color-border: #3e3e3e;
+  --brand-color-border-secondary: #303030;
+  --brand-font-family: Inter, system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --brand-font-family-code: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+  --brand-font-size: 14px;
+  --brand-font-size-sm: 12px;
+  --brand-font-size-lg: 18px;
+  --brand-font-size-xl: 22px;
+  --brand-font-size-heading-1: 38px;
+  --brand-font-size-heading-2: 32px;
+  --brand-font-size-heading-3: 26px;
+  --brand-font-size-heading-4: 22px;
+  --brand-font-size-heading-5: 18px;
+  --brand-line-height: 1.5714285714285714;
+  --brand-line-height-heading: 1.25;
+  --brand-font-weight-strong: 600;
+  --brand-size-xxs: 4px;
+  --brand-size-xs: 8px;
+  --brand-size-sm: 12px;
+  --brand-size: 16px;
+  --brand-size-md: 20px;
+  --brand-size-lg: 24px;
+  --brand-size-xl: 32px;
+  --brand-size-xxl: 48px;
+  --brand-border-radius-xs: 3px;
+  --brand-border-radius-sm: 5px;
+  --brand-border-radius: 8px;
+  --brand-border-radius-lg: 10px;
+  --brand-line-width: 1px;
+  --brand-control-height-xs: 16px;
+  --brand-control-height-sm: 24px;
+  --brand-control-height: 32px;
+  --brand-control-height-lg: 40px;
+  --brand-motion-duration-fast: 0.1s;
+  --brand-motion-duration-mid: 0.2s;
+  --brand-motion-duration-slow: 0.3s;
+  --brand-motion-ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
+  --brand-motion-ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
+  --brand-primary-palette-1: #121e32;
+  --brand-primary-palette-2: #152d4f;
+  --brand-primary-palette-3: #213b5b;
+  --brand-primary-palette-4: #284f7e;
+  --brand-primary-palette-5: #3169ad;
+  --brand-primary-palette-6: #3983dc;
+  --brand-primary-palette-7: #61a1e8;
+  --brand-primary-palette-8: #8bc1f3;
+  --brand-primary-palette-9: #b5daf8;
+  --brand-primary-palette-10: #e2f0fa;
+  --brand-presets-red-1: #fff1f0;
+  --brand-presets-red-2: #ffcbc7;
+  --brand-presets-red-3: #ffa39e;
+  --brand-presets-red-4: #ff7775;
+  --brand-presets-red-5: #ff4d50;
+  --brand-presets-red-6: #f5222d;
+  --brand-presets-red-7: #cf1323;
+  --brand-presets-red-8: #a8071a;
+  --brand-presets-red-9: #820014;
+  --brand-presets-red-10: #5c0011;
+  --brand-presets-volcano-1: #fff2e8;
+  --brand-presets-volcano-2: #ffd8bf;
+  --brand-presets-volcano-3: #ffbb96;
+  --brand-presets-volcano-4: #ff9c6e;
+  --brand-presets-volcano-5: #ff7a45;
+  --brand-presets-volcano-6: #fa541c;
+  --brand-presets-volcano-7: #d4380d;
+  --brand-presets-volcano-8: #ad2202;
+  --brand-presets-volcano-9: #871500;
+  --brand-presets-volcano-10: #610c00;
+  --brand-presets-orange-1: #fff7e6;
+  --brand-presets-orange-2: #ffe7ba;
+  --brand-presets-orange-3: #ffd591;
+  --brand-presets-orange-4: #ffc069;
+  --brand-presets-orange-5: #ffa940;
+  --brand-presets-orange-6: #fa8c16;
+  --brand-presets-orange-7: #d46b08;
+  --brand-presets-orange-8: #ad4e00;
+  --brand-presets-orange-9: #873800;
+  --brand-presets-orange-10: #612500;
+  --brand-presets-gold-1: #fffbe6;
+  --brand-presets-gold-2: #fff1b8;
+  --brand-presets-gold-3: #ffe58f;
+  --brand-presets-gold-4: #ffd666;
+  --brand-presets-gold-5: #ffc53d;
+  --brand-presets-gold-6: #faad14;
+  --brand-presets-gold-7: #d48806;
+  --brand-presets-gold-8: #ad6800;
+  --brand-presets-gold-9: #874c00;
+  --brand-presets-gold-10: #613400;
+  --brand-presets-yellow-1: #feffe6;
+  --brand-presets-yellow-2: #ffffb8;
+  --brand-presets-yellow-3: #fffb8f;
+  --brand-presets-yellow-4: #fff566;
+  --brand-presets-yellow-5: #ffeb3d;
+  --brand-presets-yellow-6: #fadb14;
+  --brand-presets-yellow-7: #d4b106;
+  --brand-presets-yellow-8: #ad8a00;
+  --brand-presets-yellow-9: #876700;
+  --brand-presets-yellow-10: #614700;
+  --brand-presets-lime-1: #fcffe6;
+  --brand-presets-lime-2: #f4ffb8;
+  --brand-presets-lime-3: #eaff8f;
+  --brand-presets-lime-4: #d3f261;
+  --brand-presets-lime-5: #bae637;
+  --brand-presets-lime-6: #a0d911;
+  --brand-presets-lime-7: #7bb305;
+  --brand-presets-lime-8: #5b8c00;
+  --brand-presets-lime-9: #3f6600;
+  --brand-presets-lime-10: #254000;
+  --brand-presets-green-1: #f6ffed;
+  --brand-presets-green-2: #d9f7be;
+  --brand-presets-green-3: #b6eb8f;
+  --brand-presets-green-4: #94de64;
+  --brand-presets-green-5: #72d13d;
+  --brand-presets-green-6: #52c41a;
+  --brand-presets-green-7: #389e0d;
+  --brand-presets-green-8: #227804;
+  --brand-presets-green-9: #135200;
+  --brand-presets-green-10: #092b00;
+  --brand-presets-cyan-1: #e6fffb;
+  --brand-presets-cyan-2: #b5f5ec;
+  --brand-presets-cyan-3: #87e8de;
+  --brand-presets-cyan-4: #5cdbd3;
+  --brand-presets-cyan-5: #36cfc9;
+  --brand-presets-cyan-6: #13c2c2;
+  --brand-presets-cyan-7: #08979c;
+  --brand-presets-cyan-8: #006d75;
+  --brand-presets-cyan-9: #00474f;
+  --brand-presets-cyan-10: #002329;
+  --brand-presets-blue-1: #e6f4ff;
+  --brand-presets-blue-2: #bae0ff;
+  --brand-presets-blue-3: #91caff;
+  --brand-presets-blue-4: #69b1ff;
+  --brand-presets-blue-5: #4096ff;
+  --brand-presets-blue-6: #1677ff;
+  --brand-presets-blue-7: #0958d9;
+  --brand-presets-blue-8: #003eb3;
+  --brand-presets-blue-9: #002c8c;
+  --brand-presets-blue-10: #001d66;
+  --brand-presets-geekblue-1: #f0f5ff;
+  --brand-presets-geekblue-2: #d6e4ff;
+  --brand-presets-geekblue-3: #adc6ff;
+  --brand-presets-geekblue-4: #85a5ff;
+  --brand-presets-geekblue-5: #597df7;
+  --brand-presets-geekblue-6: #2f54eb;
+  --brand-presets-geekblue-7: #1d39c4;
+  --brand-presets-geekblue-8: #10229e;
+  --brand-presets-geekblue-9: #061178;
+  --brand-presets-geekblue-10: #030852;
+  --brand-presets-purple-1: #f9f0ff;
+  --brand-presets-purple-2: #efdbff;
+  --brand-presets-purple-3: #d4adf7;
+  --brand-presets-purple-4: #b37feb;
+  --brand-presets-purple-5: #9254de;
+  --brand-presets-purple-6: #722ed1;
+  --brand-presets-purple-7: #531dab;
+  --brand-presets-purple-8: #391085;
+  --brand-presets-purple-9: #22075e;
+  --brand-presets-purple-10: #120338;
+  --brand-presets-magenta-1: #fff0f6;
+  --brand-presets-magenta-2: #ffd6e7;
+  --brand-presets-magenta-3: #ffadd2;
+  --brand-presets-magenta-4: #ff85bf;
+  --brand-presets-magenta-5: #f759aa;
+  --brand-presets-magenta-6: #eb2f96;
+  --brand-presets-magenta-7: #c41d7e;
+  --brand-presets-magenta-8: #9e1067;
+  --brand-presets-magenta-9: #780650;
+  --brand-presets-magenta-10: #520339;
+  --brand-presets-grey-1: #a6a6a6;
+  --brand-presets-grey-2: #999999;
+  --brand-presets-grey-3: #8c8c8c;
+  --brand-presets-grey-4: #808080;
+  --brand-presets-grey-5: #737373;
+  --brand-presets-grey-6: #666666;
+  --brand-presets-grey-7: #404040;
+  --brand-presets-grey-8: #1a1a1a;
+  --brand-presets-grey-9: #000000;
+  --brand-presets-grey-10: #000000;
+}