@drivy/cobalt
Version:
Opinionated design system for Drivy's projects.
1,292 lines (1,291 loc) • 61 kB
JavaScript
var __webpack_modules__ = {
"./utils/getCobaltTailwindcssConfig.js" (module1, __unused_rspack_exports, __webpack_require__) {
const defaultTheme = __webpack_require__("tailwindcss/defaultTheme");
const interopJsonDefault = __webpack_require__("./utils/interopJsonDefault.js");
const breakpoints = interopJsonDefault(__webpack_require__("./src/tokens/breakpoints.json"));
const zIndexes = interopJsonDefault(__webpack_require__("./src/tokens/zIndexes.json"));
const { getColorsUsingCSSVariables } = __webpack_require__("./utils/helpers.js");
const generators = __webpack_require__("./utils/tailwindcssGenerators.js");
const CSS_VAR_STATE_INTERACTIVE_COLOR = "--c-state-interactive-color";
const rem = (value)=>`${value}rem`;
const REM = {
_12px: 0.75,
_14px: 0.875,
_15px: 0.9375,
_16px: 1,
_18px: 1.125,
_20px: 1.25,
_24px: 1.5,
_28px: 1.75,
_32px: 2,
_36px: 2.25,
_40px: 2.5,
_44px: 2.75,
_56px: 3.5,
_60px: 3.75,
_64px: 4
};
const { themeColors, stateColors } = getColorsUsingCSSVariables({
additionalColors: {
transparent: "transparent",
current: "currentColor"
}
});
const baseFont = "BlinkMacSystemFont,-apple-system,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',Helvetica,Arial,sans-serif";
const getCobaltTailwindcssConfig = ({ content, safelist })=>({
content,
safelist: safelist,
prefix: "c-",
corePlugins: {
preflight: false,
letterSpacing: false,
lineHeight: false,
borderStyle: false,
borderWidth: false,
fontSize: false,
textOpacity: false,
backgroundOpacity: false,
caretColor: false,
boxShadowColor: false,
ringOffsetColor: false,
gradientColorStops: false,
gradientColorStopPositions: false,
textDecorationColor: false
},
theme: {
extend: {
transitionProperty: {
interactive: `${CSS_VAR_STATE_INTERACTIVE_COLOR}`,
DEFAULT: `${CSS_VAR_STATE_INTERACTIVE_COLOR}, ${defaultTheme.transitionProperty.DEFAULT}`,
colors: `${CSS_VAR_STATE_INTERACTIVE_COLOR}, ${defaultTheme.transitionProperty.colors}`
}
},
colors: themeColors,
semanticStateColor: {
interactive: {
DEFAULT: themeColors.transparent,
hover: stateColors.hover,
press: stateColors.press
},
onDrag: stateColors.drag,
none: {
DEFAULT: themeColors.transparent,
hover: themeColors.transparent,
press: themeColors.transparent
}
},
borderStyle: {
solid: "solid",
dashed: "dashed",
none: "none"
},
borderWidth: {
0: "0",
"0_5": "0.5px",
DEFAULT: "1px",
2: "0.125rem",
4: ".25rem"
},
borderRadius: {
none: "0",
DEFAULT: ".25rem",
md: ".375rem",
lg: ".5rem",
xl: ".75rem",
"2xl": "1rem",
full: "9999px"
},
boxShadow: {
DEFAULT: "0 0.125rem 0.75rem rgba(0, 0, 0, 0.1)",
md: "0 0.25rem 1.5rem rgba(0, 0, 0, 0.15)",
lg: "0 0.375rem 2.25rem rgba(0, 0, 0, 0.2)"
},
fontFamily: {
base: baseFont,
brand: `BrownPro,${baseFont}`,
mono: "Consolas,'Liberation Mono',Menlo,Courier,monospace"
},
fontWeight: {
regular: "400",
bold: "600"
},
spacing: {
none: "0",
"2xs": ".25rem",
xs: ".5rem",
sm: "1rem",
md: "1.5rem",
lg: "2rem",
xl: "3rem",
"2xl": "4rem"
},
screens: {
...breakpoints
},
zIndex: Object.fromEntries(Object.entries(zIndexes).map(([key, value])=>[
key,
value.toString()
])),
customText: ({ theme })=>({
link: {
cursor: "pointer",
textDecoration: "underline",
fontWeight: 500,
textUnderlineOffset: "2px",
hover: {
textDecoration: "none"
},
focus: {
textDecoration: "none"
}
},
linkVariant: {
cursor: "pointer",
textDecoration: "none",
fontWeight: 500,
textUnderlineOffset: "2px",
hover: {
textDecoration: "underline"
},
focus: {
textDecoration: "underline"
}
},
heading: {
fontFamily: theme("fontFamily").brand,
fontSize: rem(REM._36px),
lineHeight: "125%",
fontWeight: 700,
letterSpacing: "-0.5px",
from: {
sm: {
fontSize: rem(REM._56px)
}
}
},
subheading: {
fontFamily: theme("fontFamily").brand,
fontSize: rem(REM._20px),
lineHeight: "125%",
fontWeight: 700,
letterSpacing: "-0.5px",
from: {
sm: {
fontSize: rem(REM._28px)
}
}
},
"title-xl": {
fontFamily: theme("fontFamily").brand,
fontSize: rem(REM._32px),
lineHeight: "125%",
fontWeight: 700,
letterSpacing: rem(-0.02 * REM._32px),
from: {
sm: {
fontSize: rem(REM._40px),
letterSpacing: rem(-0.02 * REM._40px)
}
}
},
"title-lg": {
fontFamily: theme("fontFamily").brand,
fontSize: rem(REM._24px),
lineHeight: "125%",
fontWeight: 700,
letterSpacing: rem(-0.02 * REM._24px),
from: {
sm: {
fontSize: rem(REM._32px),
letterSpacing: rem(-0.02 * REM._32px)
}
}
},
"title-md": {
fontFamily: theme("fontFamily").brand,
fontSize: rem(REM._20px),
lineHeight: "125%",
fontWeight: 700,
letterSpacing: rem(-0.02 * REM._20px),
from: {
sm: {
fontSize: rem(REM._24px),
letterSpacing: rem(-0.02 * REM._24px)
}
}
},
"title-sm": {
fontFamily: theme("fontFamily").brand,
fontSize: rem(REM._16px),
lineHeight: "125%",
fontWeight: 600,
letterSpacing: rem(-0.02 * REM._16px),
from: {
sm: {
fontSize: rem(REM._18px),
letterSpacing: rem(-0.02 * REM._18px)
}
}
},
"title-xs": {
fontFamily: theme("fontFamily").brand,
fontSize: rem(REM._16px),
lineHeight: "125%",
fontWeight: 600,
letterSpacing: rem(-0.02 * REM._16px)
},
"body-lg": {
fontFamily: theme("fontFamily").base,
fontSize: rem(REM._18px),
lineHeight: rem(REM._24px)
},
"body-md": {
fontFamily: theme("fontFamily").base,
fontSize: rem(REM._16px),
lineHeight: rem(REM._24px)
},
"body-sm": {
fontFamily: theme("fontFamily").base,
fontSize: rem(REM._14px),
lineHeight: rem(REM._20px)
},
"body-xs": {
fontFamily: theme("fontFamily").base,
fontSize: rem(REM._12px),
lineHeight: rem(REM._16px)
},
"section-heading": {
fontFamily: theme("fontFamily").brand,
fontSize: rem(REM._14px),
lineHeight: "175%",
fontWeight: 700,
textTransform: "uppercase",
letterSpacing: "-0.2px",
color: themeColors.onSurfaceVariant
}
})
},
plugins: [
generators.text,
generators.borderWidth,
generators.borderStyle,
generators.getSemanticColorGenerator({
type: "semanticStateColor",
classPrefix: "state",
cssProperty: CSS_VAR_STATE_INTERACTIVE_COLOR,
additionalRules: {
interactive: {
"background-image": `linear-gradient(var(${CSS_VAR_STATE_INTERACTIVE_COLOR}), var(${CSS_VAR_STATE_INTERACTIVE_COLOR}))`
}
}
}),
generators.getBackgroundBusinessGradientGenerator({
themeColors
})
]
});
module1.exports = getCobaltTailwindcssConfig;
},
"./utils/helpers.js" (module1, __unused_rspack_exports, __webpack_require__) {
const interopJsonDefault = __webpack_require__("./utils/interopJsonDefault.js");
const themeTokens = interopJsonDefault(__webpack_require__("./src/tokens/theme.json"));
const palette = interopJsonDefault(__webpack_require__("./src/tokens/palette.json"));
const DEFAULT_KEY = "DEFAULT";
const COLOR_PREFIX = "--c";
const THEME_MODES = {
LIGHT: "light",
DARK: "dark"
};
const DEFAULT_THEME_MODE = THEME_MODES.LIGHT;
const STATES_COLORS = [
"hover",
"press",
"drag",
"focus"
];
const hasProp = (obj, prop)=>Object.hasOwn(obj, prop);
const getCSSVariableNameFromColorName = ({ color, scale = "" })=>`${COLOR_PREFIX}-${color}${scale ? `-${scale}` : scale}`;
const getCSSVariableNameFromThemeName = (themeName)=>`${COLOR_PREFIX}-${themeName}`;
const getThemeColorFromThemeValue = (themeValue, mode = DEFAULT_THEME_MODE)=>{
const splitPosition = mode === THEME_MODES.LIGHT ? 0 : 1;
return themeValue.split("/")[splitPosition];
};
const getColorCSSVariableFromThemeColor = (value)=>{
const [colorName, colorVariant] = value.split(".");
if (colorVariant) return `${COLOR_PREFIX}-${colorName}-${colorVariant}`;
return `${COLOR_PREFIX}-${value}`;
};
const getColorFromThemeColor = (name)=>{
const [colorName, colorVariant] = name.split(".");
if (hasProp(palette, colorName)) if (colorVariant) return palette[colorName][colorVariant];
else if ("string" == typeof palette[colorName]) return palette[colorName];
else return palette[colorName][DEFAULT_KEY];
};
const getColorCSSVariableFromThemeValue = (value, mode = DEFAULT_THEME_MODE)=>getColorCSSVariableFromThemeColor(getThemeColorFromThemeValue(value, mode));
const getColorFromThemeValue = (value, mode = DEFAULT_THEME_MODE)=>getColorFromThemeColor(getThemeColorFromThemeValue(value, mode));
const getColorsUsingCSSVariables = ({ additionalColors } = {})=>{
const colorsUsingCSSVariables = {};
const stateColorsUsingCSSVariables = {};
for(const themeProp in themeTokens)if (STATES_COLORS.includes(themeProp)) stateColorsUsingCSSVariables[themeProp] = `var(${getCSSVariableNameFromThemeName(themeProp)})`;
else colorsUsingCSSVariables[themeProp] = `var(${getCSSVariableNameFromThemeName(themeProp)})`;
if (additionalColors) {
for(const color in additionalColors)if (hasProp(additionalColors, color)) colorsUsingCSSVariables[color] = additionalColors[color];
}
return {
stateColors: stateColorsUsingCSSVariables,
themeColors: colorsUsingCSSVariables
};
};
module1.exports = {
DEFAULT_THEME_MODE,
DEFAULT_KEY,
THEME_MODES,
hasProp,
getColorCSSVariableFromThemeValue,
getCSSVariableNameFromThemeName,
getCSSVariableNameFromColorName,
getThemeColorFromThemeValue,
getColorFromThemeValue,
getColorsUsingCSSVariables
};
},
"./utils/interopJsonDefault.js" (module1) {
module1.exports = (mod)=>mod?.__esModule ? mod.default : mod;
},
"./utils/tailwindcssGenerators.js" (module1, __unused_rspack_exports, __webpack_require__) {
const interopJsonDefault = __webpack_require__("./utils/interopJsonDefault.js");
const breakpoints = interopJsonDefault(__webpack_require__("./src/tokens/breakpoints.json"));
const { hasProp } = __webpack_require__("./utils/helpers.js");
const COLOR_STATES = {
DEFAULT: "DEFAULT",
HOVER: "hover",
PRESS: "press"
};
const textGenerator = ({ addUtilities, theme })=>{
const textTheme = theme("customText");
const mediaQueries = {};
const textUtilities = Object.keys(textTheme).reduce((acc, propName)=>{
const props = textTheme[propName];
acc[`.text-${propName}`] = {};
[
"fontFamily",
"fontSize",
"lineHeight",
"fontWeight",
"textTransform",
"color",
"letterSpacing",
"textDecoration",
"textUnderlineOffset",
"cursor"
].forEach((cssPropName)=>{
if (props[cssPropName]) acc[`.text-${propName}`][cssPropName] = props[cssPropName];
});
if (props.from) Object.keys(props.from).forEach((breakpoint)=>{
const breakpointRule = `@media (min-width: ${breakpoints[breakpoint]})`;
if (!hasProp(mediaQueries, breakpointRule)) mediaQueries[breakpointRule] = {};
mediaQueries[breakpointRule] = {
...mediaQueries[breakpointRule],
[`.text-${propName}`]: props.from[breakpoint]
};
});
if (props.hover) acc[`.text-${propName}:hover`] = {
...props.hover
};
if (props.focus) acc[`.text-${propName}:focus`] = {
...props.focus
};
return acc;
}, {});
addUtilities({
...textUtilities,
...mediaQueries
}, {
variants: [
"responsive"
]
});
};
const borderWidthGenerator = ({ addUtilities, theme })=>{
const widthTheme = theme("borderWidth");
const widthUtilities = Object.keys(widthTheme).reduce((acc, propName)=>{
const modifier = "DEFAULT" === propName ? "" : `-${propName}`;
acc[`.border${modifier}`] = {
borderWidth: widthTheme[propName],
..."0" === widthTheme[propName] ? {} : {
borderStyle: "solid"
}
};
acc[`.border-t${modifier}`] = {
borderTopWidth: widthTheme[propName],
..."0" === widthTheme[propName] ? {} : {
borderTopStyle: "solid"
}
};
acc[`.border-r${modifier}`] = {
borderRightWidth: widthTheme[propName],
..."0" === widthTheme[propName] ? {} : {
borderRightStyle: "solid"
}
};
acc[`.border-b${modifier}`] = {
borderBottomWidth: widthTheme[propName],
..."0" === widthTheme[propName] ? {} : {
borderBottomStyle: "solid"
}
};
acc[`.border-l${modifier}`] = {
borderLeftWidth: widthTheme[propName],
..."0" === widthTheme[propName] ? {} : {
borderLeftStyle: "solid"
}
};
return acc;
}, {});
addUtilities(widthUtilities);
};
const borderStyleGenerator = ({ addUtilities, theme })=>{
const styleTheme = theme("borderStyle");
const styleUtilities = Object.keys(styleTheme).reduce((acc, propName)=>{
acc[`.border-${propName}`] = {
borderStyle: styleTheme[propName]
};
acc[`.border-t-${propName}`] = {
borderTopStyle: styleTheme[propName]
};
acc[`.border-r-${propName}`] = {
borderRightStyle: styleTheme[propName]
};
acc[`.border-b-${propName}`] = {
borderBottomStyle: styleTheme[propName]
};
acc[`.border-l-${propName}`] = {
borderLeftStyle: styleTheme[propName]
};
return acc;
}, {});
addUtilities(styleUtilities);
};
const getBackgroundBusinessGradientGenerator = ({ themeColors })=>({ addUtilities })=>{
addUtilities({
".bg-businessGradient": {
backgroundImage: `linear-gradient(150deg, ${themeColors.businessVariant} 7.36%, ${themeColors.business} 98.37%)`
}
});
};
const getSemanticColorGenerator = ({ type, classPrefix, selectorSuffix = "", cssProperty, cssProperty2, enableInteractiveColors = true, additionalRules = {} })=>({ addUtilities, theme })=>{
const themeProps = theme(type);
if (!themeProps) throw new Error(`Didn't found theme properties for "${type}".`);
const utilities = Object.keys(themeProps).reduce((acc, propName)=>{
const colorProp = themeProps[propName];
if ("string" == typeof colorProp) acc[`.${classPrefix}-${propName}${selectorSuffix}`] = {
[cssProperty]: colorProp,
...cssProperty2 ? {
[cssProperty2]: colorProp
} : {},
...additionalRules[propName] || {}
};
else Object.keys(colorProp).forEach((colorState)=>{
const subColorProp = colorProp[colorState];
if (colorState === COLOR_STATES.DEFAULT) acc[`.${classPrefix}-${propName}${selectorSuffix}`] = {
[cssProperty]: subColorProp,
...cssProperty2 ? {
[cssProperty2]: subColorProp
} : {},
...additionalRules[propName] || {}
};
else if (colorState === COLOR_STATES.HOVER && enableInteractiveColors) {
acc[`.${classPrefix}-${propName}:hover${selectorSuffix}`] = {
[cssProperty]: subColorProp,
...cssProperty2 ? {
[cssProperty2]: subColorProp
} : {}
};
acc[`.${classPrefix}-${propName}:focus${selectorSuffix}`] = {
[cssProperty]: subColorProp,
...cssProperty2 ? {
[cssProperty2]: subColorProp
} : {}
};
} else if (colorState === COLOR_STATES.PRESS && enableInteractiveColors) acc[`.${classPrefix}-${propName}:active${selectorSuffix}`] = {
[cssProperty]: subColorProp,
...cssProperty2 ? {
[cssProperty2]: subColorProp
} : {}
};
else if ("string" == typeof subColorProp) acc[`.${classPrefix}-${propName}-${colorState}`] = {
[cssProperty]: subColorProp,
...cssProperty2 ? {
[cssProperty2]: subColorProp
} : {}
};
else Object.keys(colorProp).forEach((subColorState)=>{
const subSubColorProp = colorProp[colorState][subColorState];
if (subColorState === COLOR_STATES.DEFAULT) acc[`.${classPrefix}-${propName}${selectorSuffix}`] = {
[cssProperty]: subSubColorProp,
...cssProperty2 ? {
[cssProperty2]: subSubColorProp
} : {}
};
else if (subColorState === COLOR_STATES.HOVER && enableInteractiveColors) {
acc[`.${classPrefix}-${propName}:hover${selectorSuffix}`] = {
[cssProperty]: subSubColorProp,
...cssProperty2 ? {
[cssProperty2]: subSubColorProp
} : {}
};
acc[`.${classPrefix}-${propName}:focus${selectorSuffix}`] = {
[cssProperty]: subSubColorProp,
...cssProperty2 ? {
[cssProperty2]: subSubColorProp
} : {}
};
} else if (subColorState === COLOR_STATES.PRESS && enableInteractiveColors) acc[`.${classPrefix}-${propName}:active${selectorSuffix}`] = {
[cssProperty]: subSubColorProp,
...cssProperty2 ? {
[cssProperty2]: subSubColorProp
} : {}
};
});
});
return acc;
}, {});
addUtilities(utilities);
};
module1.exports = {
text: textGenerator,
borderWidth: borderWidthGenerator,
borderStyle: borderStyleGenerator,
getBackgroundBusinessGradientGenerator,
getSemanticColorGenerator
};
},
"tailwindcss/defaultTheme" (module1) {
"use strict";
module1.exports = require("tailwindcss/defaultTheme");
},
"./src/tokens/breakpoints.json" (__unused_rspack___webpack_module__, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
const xs = "480px";
const sm = "768px";
const md = "992px";
const lg = "1200px";
const __rspack_default_export = {
xs: "480px",
sm: "768px",
md: "992px",
lg: "1200px"
};
__webpack_require__.d(__webpack_exports__, {}, {
default: __rspack_default_export,
lg: lg,
md: md,
sm: sm,
xs: xs
});
},
"./src/tokens/palette.json" (__unused_rspack___webpack_module__, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
const grey = {
100: "#FFFFFF",
200: "#F1F1F1",
300: "#E3E3E3",
400: "#D5D5D5",
500: "#C7C6C7",
600: "#BAB8BA",
700: "#ACAAAC",
800: "#9F9B9F",
900: "#918D91",
1000: "#858185",
1100: "#797579",
1200: "#6D6A6D",
1300: "#615E61",
1400: "#555355",
1500: "#494749",
1600: "#3D3C3D"
};
const black = {
100: "#4D4C4C",
200: "#4A4949",
300: "#464545",
400: "#434242",
500: "#403E3F",
600: "#3C3B3B",
700: "#393738",
800: "#353435",
900: "#323131",
1000: "#2F2D2E",
1100: "#2B2A2B",
1200: "#282627",
1300: "#242324",
1400: "#212021",
1500: "#1D1C1D",
1600: "#1A191A"
};
const navy = {
100: "#F1F1F4",
200: "#DADAE3",
300: "#C4C3D3",
400: "#ACABC4",
500: "#9592B5",
600: "#7E78A7",
700: "#675F98",
800: "#574E82",
900: "#463E6B",
1000: "#362E53",
1100: "#302652",
1200: "#2B1F51",
1300: "#25194F",
1400: "#21134D",
1500: "#1C0E49",
1600: "#180A46"
};
const purple = {
100: "#F4F1F4",
200: "#F0E1EE",
300: "#E1B4E2",
400: "#DD9CE0",
500: "#DB82DF",
600: "#DB66E0",
700: "#DB48E3",
800: "#DD28E9",
900: "#D90EE8",
1000: "#C705D7",
1100: "#BC00CC",
1200: "#920E9D",
1300: "#77157F",
1400: "#5E1964",
1500: "#481A4C",
1600: "#341936"
};
const violet = {
100: "#EFE9FB",
200: "#DCCCF7",
300: "#CBAEF4",
400: "#BC8FF3",
500: "#AE6FF3",
600: "#A34DF4",
700: "#9B2BF6",
800: "#9606F9",
900: "#8C01DE",
1000: "#7C01C5",
1100: "#6B01AB",
1200: "#5B0092",
1300: "#4B0078",
1400: "#3B005F",
1500: "#2B0045",
1600: "#1B002C"
};
const blue = {
100: "#F5F8FF",
200: "#D9E5FF",
300: "#BDD3FE",
400: "#A2C3FD",
500: "#87B4FC",
600: "#6DA5FA",
700: "#5298F8",
800: "#388CF6",
900: "#1F81F3",
1000: "#176CDC",
1100: "#1D5AB6",
1200: "#214B94",
1300: "#223D74",
1400: "#203057",
1500: "#1B243C",
1600: "#141824"
};
const lime = {
100: "#F8FEC5",
200: "#F4FCA1",
300: "#F0FA85",
400: "#EBF669",
500: "#E6F24F",
600: "#E1ED35",
700: "#DBE71B",
800: "#C2CB18",
900: "#A6AD18",
1000: "#8C9219",
1100: "#75791D",
1200: "#60631E",
1300: "#4C4E1E",
1400: "#3A3B1C",
1500: "#292A18",
1600: "#1A1B12"
};
const orange = {
100: "#F1BEB1",
200: "#EEAF9B",
300: "#ECA185",
400: "#EB956E",
500: "#E98957",
600: "#E97F3F",
700: "#E87727",
800: "#D76A14",
900: "#CC6212",
1000: "#B65410",
1100: "#9F470D",
1200: "#893B0B",
1300: "#722F09",
1400: "#5B2407",
1500: "#441905",
1600: "#2D1003"
};
const red = {
100: "#FEF0F0",
200: "#FCD3D3",
300: "#FAB7B7",
400: "#F79B9B",
500: "#F57F7F",
600: "#F26363",
700: "#EF4848",
800: "#EB2D2D",
900: "#E41616",
1000: "#C71414",
1100: "#AB1616",
1200: "#901717",
1300: "#771616",
1400: "#5E1515",
1500: "#471212",
1600: "#310E0E"
};
const green = {
100: "#F3FBEF",
200: "#E0F4D7",
300: "#CBEDC0",
400: "#B6E5A9",
500: "#A0DD93",
600: "#8AD37D",
700: "#73C968",
800: "#5CBF54",
900: "#49B142",
1000: "#3E9939",
1100: "#348230",
1200: "#2A6A27",
1300: "#20521E",
1400: "#163B15",
1500: "#0D230D",
1600: "#040B04"
};
const yellow = {
100: "#FFFCF7",
200: "#FFF4E2",
300: "#FFEDCE",
400: "#FFE5B9",
500: "#FFDDA4",
600: "#FFD68F",
700: "#FFCE7B",
800: "#FFC766",
900: "#F9BA4C",
1000: "#F0AD35",
1100: "#E59E20",
1200: "#C68B1F",
1300: "#A47622",
1400: "#846122",
1500: "#664D20",
1600: "#4A3A1C"
};
const white = "#FFFFFF";
const white_alpha = {
5: "#FFFFFF0D",
10: "#FFFFFF1A",
15: "#FFFFFF26",
20: "#FFFFFF33",
25: "#FFFFFF40",
30: "#FFFFFF4D",
35: "#FFFFFF59",
40: "#FFFFFF66",
45: "#FFFFFF73",
50: "#FFFFFF80",
55: "#FFFFFF8C",
60: "#FFFFFF99",
65: "#FFFFFFA6",
70: "#FFFFFFB3"
};
const black_alpha = {
2: "#00000005",
4: "#0000000A",
6: "#0000000F",
8: "#00000014",
10: "#0000001A",
12: "#0000001F",
14: "#00000024",
16: "#00000029",
18: "#0000002E",
20: "#00000033",
22: "#00000038",
24: "#0000003D",
26: "#00000042",
28: "#00000047",
30: "#0000004D",
32: "#00000052",
34: "#00000057"
};
const navy_alpha = {
1: "#30265203",
2: "#30265205",
3: "#30265208",
4: "#3026520A",
5: "#3026520D",
6: "#3026520F",
7: "#30265212",
8: "#30265214",
9: "#30265217",
10: "#3026521A",
12: "#3026521F",
14: "#30265224",
16: "#30265229",
18: "#3026522E",
20: "#30265233",
22: "#30265238",
24: "#3026523D",
26: "#30265242",
28: "#30265247",
30: "#3026524D",
32: "#30265252",
34: "#30265257",
36: "#3026525C",
38: "#30265261",
40: "#30265266",
42: "#3026526B",
44: "#30265270",
46: "#30265275",
48: "#3026527A",
50: "#30265280",
52: "#30265285",
54: "#3026528A",
56: "#3026528F",
58: "#30265294",
60: "#30265299",
62: "#3026529E",
64: "#302652A3",
66: "#302652A8",
68: "#302652AD",
70: "#302652B3",
72: "#302652B8",
74: "#302652BD",
76: "#302652C2",
78: "#302652C7",
80: "#302652CC",
82: "#302652D1",
84: "#302652D6",
86: "#302652DB",
88: "#302652E0",
90: "#302652E6",
92: "#302652EB",
94: "#302652F0",
96: "#302652F5",
98: "#302652FA"
};
const grey_alpha = {
1: "#E3E3E303",
2: "#E3E3E305",
3: "#E3E3E308",
4: "#E3E3E30A",
5: "#E3E3E30D",
6: "#E3E3E30F",
7: "#E3E3E312",
8: "#E3E3E314",
9: "#E3E3E317",
10: "#E3E3E31A",
15: "#E3E3E326",
20: "#E3E3E333",
25: "#E3E3E340",
30: "#E3E3E34D",
35: "#E3E3E359",
40: "#E3E3E366",
45: "#E3E3E373",
50: "#E3E3E380",
55: "#E3E3E38C",
60: "#E3E3E399",
65: "#E3E3E3A6",
70: "#E3E3E3B3",
75: "#E3E3E3BF",
80: "#E3E3E3CC",
85: "#E3E3E3D9",
90: "#E3E3E3E6",
95: "#E3E3E3F2"
};
const __rspack_default_export = {
grey: {
100: "#FFFFFF",
200: "#F1F1F1",
300: "#E3E3E3",
400: "#D5D5D5",
500: "#C7C6C7",
600: "#BAB8BA",
700: "#ACAAAC",
800: "#9F9B9F",
900: "#918D91",
1000: "#858185",
1100: "#797579",
1200: "#6D6A6D",
1300: "#615E61",
1400: "#555355",
1500: "#494749",
1600: "#3D3C3D"
},
black: {
100: "#4D4C4C",
200: "#4A4949",
300: "#464545",
400: "#434242",
500: "#403E3F",
600: "#3C3B3B",
700: "#393738",
800: "#353435",
900: "#323131",
1000: "#2F2D2E",
1100: "#2B2A2B",
1200: "#282627",
1300: "#242324",
1400: "#212021",
1500: "#1D1C1D",
1600: "#1A191A"
},
navy: {
100: "#F1F1F4",
200: "#DADAE3",
300: "#C4C3D3",
400: "#ACABC4",
500: "#9592B5",
600: "#7E78A7",
700: "#675F98",
800: "#574E82",
900: "#463E6B",
1000: "#362E53",
1100: "#302652",
1200: "#2B1F51",
1300: "#25194F",
1400: "#21134D",
1500: "#1C0E49",
1600: "#180A46"
},
purple: {
100: "#F4F1F4",
200: "#F0E1EE",
300: "#E1B4E2",
400: "#DD9CE0",
500: "#DB82DF",
600: "#DB66E0",
700: "#DB48E3",
800: "#DD28E9",
900: "#D90EE8",
1000: "#C705D7",
1100: "#BC00CC",
1200: "#920E9D",
1300: "#77157F",
1400: "#5E1964",
1500: "#481A4C",
1600: "#341936"
},
violet: {
100: "#EFE9FB",
200: "#DCCCF7",
300: "#CBAEF4",
400: "#BC8FF3",
500: "#AE6FF3",
600: "#A34DF4",
700: "#9B2BF6",
800: "#9606F9",
900: "#8C01DE",
1000: "#7C01C5",
1100: "#6B01AB",
1200: "#5B0092",
1300: "#4B0078",
1400: "#3B005F",
1500: "#2B0045",
1600: "#1B002C"
},
blue: {
100: "#F5F8FF",
200: "#D9E5FF",
300: "#BDD3FE",
400: "#A2C3FD",
500: "#87B4FC",
600: "#6DA5FA",
700: "#5298F8",
800: "#388CF6",
900: "#1F81F3",
1000: "#176CDC",
1100: "#1D5AB6",
1200: "#214B94",
1300: "#223D74",
1400: "#203057",
1500: "#1B243C",
1600: "#141824"
},
lime: {
100: "#F8FEC5",
200: "#F4FCA1",
300: "#F0FA85",
400: "#EBF669",
500: "#E6F24F",
600: "#E1ED35",
700: "#DBE71B",
800: "#C2CB18",
900: "#A6AD18",
1000: "#8C9219",
1100: "#75791D",
1200: "#60631E",
1300: "#4C4E1E",
1400: "#3A3B1C",
1500: "#292A18",
1600: "#1A1B12"
},
orange: {
100: "#F1BEB1",
200: "#EEAF9B",
300: "#ECA185",
400: "#EB956E",
500: "#E98957",
600: "#E97F3F",
700: "#E87727",
800: "#D76A14",
900: "#CC6212",
1000: "#B65410",
1100: "#9F470D",
1200: "#893B0B",
1300: "#722F09",
1400: "#5B2407",
1500: "#441905",
1600: "#2D1003"
},
red: {
100: "#FEF0F0",
200: "#FCD3D3",
300: "#FAB7B7",
400: "#F79B9B",
500: "#F57F7F",
600: "#F26363",
700: "#EF4848",
800: "#EB2D2D",
900: "#E41616",
1000: "#C71414",
1100: "#AB1616",
1200: "#901717",
1300: "#771616",
1400: "#5E1515",
1500: "#471212",
1600: "#310E0E"
},
green: {
100: "#F3FBEF",
200: "#E0F4D7",
300: "#CBEDC0",
400: "#B6E5A9",
500: "#A0DD93",
600: "#8AD37D",
700: "#73C968",
800: "#5CBF54",
900: "#49B142",
1000: "#3E9939",
1100: "#348230",
1200: "#2A6A27",
1300: "#20521E",
1400: "#163B15",
1500: "#0D230D",
1600: "#040B04"
},
yellow: {
100: "#FFFCF7",
200: "#FFF4E2",
300: "#FFEDCE",
400: "#FFE5B9",
500: "#FFDDA4",
600: "#FFD68F",
700: "#FFCE7B",
800: "#FFC766",
900: "#F9BA4C",
1000: "#F0AD35",
1100: "#E59E20",
1200: "#C68B1F",
1300: "#A47622",
1400: "#846122",
1500: "#664D20",
1600: "#4A3A1C"
},
white: "#FFFFFF",
white_alpha: {
5: "#FFFFFF0D",
10: "#FFFFFF1A",
15: "#FFFFFF26",
20: "#FFFFFF33",
25: "#FFFFFF40",
30: "#FFFFFF4D",
35: "#FFFFFF59",
40: "#FFFFFF66",
45: "#FFFFFF73",
50: "#FFFFFF80",
55: "#FFFFFF8C",
60: "#FFFFFF99",
65: "#FFFFFFA6",
70: "#FFFFFFB3"
},
black_alpha: {
2: "#00000005",
4: "#0000000A",
6: "#0000000F",
8: "#00000014",
10: "#0000001A",
12: "#0000001F",
14: "#00000024",
16: "#00000029",
18: "#0000002E",
20: "#00000033",
22: "#00000038",
24: "#0000003D",
26: "#00000042",
28: "#00000047",
30: "#0000004D",
32: "#00000052",
34: "#00000057"
},
navy_alpha: {
1: "#30265203",
2: "#30265205",
3: "#30265208",
4: "#3026520A",
5: "#3026520D",
6: "#3026520F",
7: "#30265212",
8: "#30265214",
9: "#30265217",
10: "#3026521A",
12: "#3026521F",
14: "#30265224",
16: "#30265229",
18: "#3026522E",
20: "#30265233",
22: "#30265238",
24: "#3026523D",
26: "#30265242",
28: "#30265247",
30: "#3026524D",
32: "#30265252",
34: "#30265257",
36: "#3026525C",
38: "#30265261",
40: "#30265266",
42: "#3026526B",
44: "#30265270",
46: "#30265275",
48: "#3026527A",
50: "#30265280",
52: "#30265285",
54: "#3026528A",
56: "#3026528F",
58: "#30265294",
60: "#30265299",
62: "#3026529E",
64: "#302652A3",
66: "#302652A8",
68: "#302652AD",
70: "#302652B3",
72: "#302652B8",
74: "#302652BD",
76: "#302652C2",
78: "#302652C7",
80: "#302652CC",
82: "#302652D1",
84: "#302652D6",
86: "#302652DB",
88: "#302652E0",
90: "#302652E6",
92: "#302652EB",
94: "#302652F0",
96: "#302652F5",
98: "#302652FA"
},
grey_alpha: {
1: "#E3E3E303",
2: "#E3E3E305",
3: "#E3E3E308",
4: "#E3E3E30A",
5: "#E3E3E30D",
6: "#E3E3E30F",
7: "#E3E3E312",
8: "#E3E3E314",
9: "#E3E3E317",
10: "#E3E3E31A",
15: "#E3E3E326",
20: "#E3E3E333",
25: "#E3E3E340",
30: "#E3E3E34D",
35: "#E3E3E359",
40: "#E3E3E366",
45: "#E3E3E373",
50: "#E3E3E380",
55: "#E3E3E38C",
60: "#E3E3E399",
65: "#E3E3E3A6",
70: "#E3E3E3B3",
75: "#E3E3E3BF",
80: "#E3E3E3CC",
85: "#E3E3E3D9",
90: "#E3E3E3E6",
95: "#E3E3E3F2"
}
};
__webpack_require__.d(__webpack_exports__, {}, {
black: black,
black_alpha: black_alpha,
blue: blue,
default: __rspack_default_export,
green: green,
grey: grey,
grey_alpha: grey_alpha,
lime: lime,
navy: navy,
navy_alpha: navy_alpha,
orange: orange,
purple: purple,
red: red,
violet: violet,
white: white,
white_alpha: white_alpha,
yellow: yellow
});
},
"./src/tokens/theme.json" (__unused_rspack___webpack_module__, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
const surface = "white/black.1600";
const surfaceBright = "white/black.1400";
const surfaceContainer = "white/black.1100";
const surfaceContainerVariant = "navy.100/black.800";
const outline = "navy.200/black.1000";
const outlineVariant = "navy.300/black.400";
const onSurface = "navy.1100/grey.300";
const onSurfaceVariant = "navy.600/grey.700";
const onSurfaceContainerVariant = "grey.500/grey.1300";
const disabled = "navy_alpha.8/grey_alpha.20";
const onSurfaceDisabled = "navy_alpha.40/grey_alpha.45";
const primary = "purple.1100/purple.600";
const onPrimary = "white/black.1600";
const primaryContainer = "purple.200/purple.1600";
const onPrimaryContainer = "purple.1100/purple.200";
const secondary = "violet.900/violet.400";
const onSecondary = "violet.100/black.1600";
const secondaryContainer = "violet.100/violet.1400";
const onSecondaryContainer = "violet.1500/violet.100";
const onSecondaryContainerVariant = "violet.800/violet.500";
const tertiary = "blue.900/blue.700";
const onTertiary = "white/blue.100";
const outlineTertiary = "blue.1000/blue.800";
const tertiaryContainer = "blue.200/blue.1400";
const onTertiaryContainer = "violet.1600/blue.100";
const onTertiaryContainerVariant = "blue.1000/blue.300";
const success = "green.1000/green.600";
const onSuccess = "green.100/black.1200";
const successContainer = "green.200/green.1200";
const onSuccessContainer = "green.1300/green.200";
const error = "red.800/red.500";
const onError = "white/black.1600";
const errorContainer = "red.100/red.1400";
const onErrorContainer = "red.1100/red.200";
const warning = "yellow.800/yellow.600";
const onWarning = "yellow.1500/black.1600";
const warningContainer = "yellow.200/yellow.1600";
const onWarningContainer = "yellow.1400/yellow.500";