mirror of
https://github.com/AppFlowy-IO/AppFlowy-Web.git
synced 2025-11-28 10:18:47 +08:00
chore: modified design tokens (#101)
This commit is contained in:
Kilu.He
@@ -56,14 +56,6 @@
|
||||
"$type": "color",
|
||||
"$value": "#ffffff00"
|
||||
},
|
||||
"alpha-white-20": {
|
||||
"$type": "color",
|
||||
"$value": "#ffffff33"
|
||||
},
|
||||
"alpha-white-30": {
|
||||
"$type": "color",
|
||||
"$value": "#ffffff4d"
|
||||
},
|
||||
"alpha-grey-100-05": {
|
||||
"$type": "color",
|
||||
"$value": "#f9fafd0d"
|
||||
@@ -79,14 +71,6 @@
|
||||
"alpha-grey-1000-10": {
|
||||
"$type": "color",
|
||||
"$value": "#1f23291a"
|
||||
},
|
||||
"alpha-grey-1000-70": {
|
||||
"$type": "color",
|
||||
"$value": "#1f2329b2"
|
||||
},
|
||||
"alpha-grey-1000-80": {
|
||||
"$type": "color",
|
||||
"$value": "#1f2329cc"
|
||||
}
|
||||
},
|
||||
"Blue": {
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -10,7 +10,7 @@ interface FileDropzoneProps {
|
||||
placeholder?: string | React.ReactNode;
|
||||
}
|
||||
|
||||
function FileDropzone({ onChange, accept, multiple, disabled, placeholder }: FileDropzoneProps) {
|
||||
function FileDropzone ({ onChange, accept, multiple, disabled, placeholder }: FileDropzoneProps) {
|
||||
const { t } = useTranslation();
|
||||
const [dragging, setDragging] = useState(false);
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
@@ -79,12 +79,12 @@ function FileDropzone({ onChange, accept, multiple, disabled, placeholder }: Fil
|
||||
>
|
||||
<div className={'flex h-full w-full flex-col items-center justify-center gap-4 overflow-hidden'}>
|
||||
<ImageIcon className={'h-12 w-12 text-fill-tertiary'} />
|
||||
<div className={'whitespace-pre-wrap break-words text-center text-base text-fill-tertiary'}>
|
||||
<div className={'whitespace-pre-wrap break-words text-center text-base text-text-secondary'}>
|
||||
{placeholder || t('fileDropzone.dropFile')}
|
||||
</div>
|
||||
</div>
|
||||
<input
|
||||
type='file'
|
||||
type="file"
|
||||
disabled={disabled}
|
||||
ref={fileInputRef}
|
||||
style={{ display: 'none' }}
|
||||
|
||||
@@ -1,26 +1,36 @@
|
||||
import { UnSupportedBlock } from '@/components/editor/components/element/UnSupportedBlock';
|
||||
import { EditorElementProps } from '@/components/editor/editor.type';
|
||||
import React, { forwardRef } from 'react';
|
||||
import { Alert } from '@mui/material';
|
||||
|
||||
export const BlockNotFound = forwardRef<HTMLDivElement, EditorElementProps>(({ node }, ref) => {
|
||||
if(import.meta.env.DEV) {
|
||||
return (
|
||||
<div
|
||||
className={'w-full my-1 select-none'}
|
||||
ref={ref}
|
||||
contentEditable={false}
|
||||
>
|
||||
<Alert
|
||||
className={'h-fit w-full'}
|
||||
severity={'error'}
|
||||
export const BlockNotFound = forwardRef<HTMLDivElement, EditorElementProps>(({ node, children }, ref) => {
|
||||
const type = node.type;
|
||||
|
||||
if (import.meta.env.DEV) {
|
||||
if (type === 'block_not_found') {
|
||||
return (
|
||||
<div
|
||||
className={'w-full my-1 select-none'}
|
||||
ref={ref}
|
||||
contentEditable={false}
|
||||
>
|
||||
<div className={'text-base'}>{`Block not found, id is ${node.blockId}`}</div>
|
||||
<div>
|
||||
{'It might be deleted or moved to another place but the children map is still referencing it.'}
|
||||
</div>
|
||||
</Alert>
|
||||
</div>
|
||||
);
|
||||
<Alert
|
||||
className={'h-fit w-full'}
|
||||
severity={'error'}
|
||||
>
|
||||
<div className={'text-base'}>{`Block not found, id is ${node.blockId}`}</div>
|
||||
<div>
|
||||
{'It might be deleted or moved to another place but the children map is still referencing it.'}
|
||||
</div>
|
||||
</Alert>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return <UnSupportedBlock
|
||||
ref={ref}
|
||||
node={node}
|
||||
>{children}</UnSupportedBlock>;
|
||||
}
|
||||
|
||||
return <div
|
||||
|
||||
@@ -24,7 +24,6 @@ import { TableBlock, TableCellBlock } from '@/components/editor/components/block
|
||||
import { Text } from '@/components/editor/components/blocks/text';
|
||||
import { VideoBlock } from '@/components/editor/components/blocks/video';
|
||||
import { BlockNotFound } from '@/components/editor/components/element/BlockNotFound';
|
||||
import { UnSupportedBlock } from '@/components/editor/components/element/UnSupportedBlock';
|
||||
import { EditorElementProps, TextNode } from '@/components/editor/editor.type';
|
||||
import { useEditorContext } from '@/components/editor/EditorContext';
|
||||
import { ElementFallbackRender } from '@/components/error/ElementFallbackRender';
|
||||
@@ -161,10 +160,8 @@ export const Element = ({
|
||||
return Columns;
|
||||
case BlockType.ColumnBlock:
|
||||
return Column;
|
||||
case 'block_not_found':
|
||||
return BlockNotFound;
|
||||
default:
|
||||
return UnSupportedBlock;
|
||||
return BlockNotFound;
|
||||
}
|
||||
}, [type]) as FC<EditorElementProps>;
|
||||
|
||||
|
||||
@@ -14,7 +14,7 @@ const avatarVariants = cva(
|
||||
},
|
||||
variant: {
|
||||
default: 'bg-transparent',
|
||||
outline: 'border-[1.5px] bg-transparent border-border-grey-tertiary',
|
||||
outline: 'border-[1.5px] bg-transparent border-border-primary',
|
||||
},
|
||||
size: {
|
||||
sm: 'h-6 text-xs leading-[16px] text-icon-primary font-normal',
|
||||
@@ -79,7 +79,7 @@ function AvatarFallback ({
|
||||
data-slot="avatar-fallback"
|
||||
className={cn(
|
||||
'flex text-icon-primary w-full h-full items-center justify-center',
|
||||
isString ? 'bg-fill-tertiary' : '',
|
||||
isString ? 'bg-fill-secondary' : '',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
|
||||
@@ -11,16 +11,16 @@ const buttonVariants = cva(
|
||||
variants: {
|
||||
variant: {
|
||||
default:
|
||||
'bg-fill-theme-thick text-text-on-fill hover:bg-fill-theme-thick-hover disabled:bg-fill-primary-alpha-5 disabled:text-text-tertiary',
|
||||
'bg-fill-theme-thick text-text-on-fill hover:bg-fill-theme-thick-hover disabled:bg-fill-content-hover disabled:text-text-tertiary',
|
||||
destructive:
|
||||
'bg-fill-error-thick text-text-on-fill hover:bg-fill-error-thick-hover focus-visible:ring-border-error-thick disabled:bg-fill-primary-alpha-5 disabled:text-text-tertiary',
|
||||
'bg-fill-error-thick text-text-on-fill hover:bg-fill-error-thick-hover focus-visible:ring-border-error-thick disabled:bg-fill-content-hover disabled:text-text-tertiary',
|
||||
outline:
|
||||
'border border-border-grey-tertiary bg-transparent text-text-primary hover:bg-fill-primary-alpha-5 hover:border-border-grey-tertiary-hover disabled:text-text-tertiary',
|
||||
'border border-border-primary bg-fill-content text-text-primary hover:bg-fill-content-hover hover:border-border-primary-hover disabled:text-text-tertiary',
|
||||
'destructive-outline':
|
||||
'bg-transparent text-text-error hover:bg-fill-error-select hover:text-text-error-hover border border-border-error-thick hover:border-border-error-thick-hover disabled:text-text-tertiary disabled:border-border-grey-tertiary',
|
||||
'bg-fill-content text-text-error hover:bg-fill-error-select hover:text-text-error-hover border border-border-error-thick hover:border-border-error-thick-hover disabled:text-text-tertiary disabled:border-border-primary',
|
||||
ghost:
|
||||
'hover:bg-fill-primary-alpha-5 text-text-primary disabled:bg-fill-transparent disabled:text-text-tertiary',
|
||||
link: 'hover:bg-transparent text-text-theme hover:text-text-theme-hover !h-fit',
|
||||
'hover:bg-fill-content-hover text-text-primary disabled:bg-fill-content disabled:text-text-tertiary',
|
||||
link: 'hover:bg-fill-content text-text-action hover:text-text-action-hover !h-fit',
|
||||
loading: 'opacity-50 cursor-not-allowed',
|
||||
},
|
||||
size: {
|
||||
|
||||
@@ -100,7 +100,7 @@ function DialogContent ({
|
||||
'disabled:pointer-events-none disabled:text-text-tertiary',
|
||||
|
||||
// Open state styling
|
||||
'data-[state=open]:bg-fill-tertiary data-[state=open]:text-icon-primary',
|
||||
'data-[state=open]:bg-fill-secondary data-[state=open]:text-icon-primary',
|
||||
|
||||
// Transition
|
||||
'transition-opacity',
|
||||
|
||||
@@ -101,7 +101,7 @@ function DropdownMenuItem ({
|
||||
data-variant={variant}
|
||||
className={cn(
|
||||
// Focus states
|
||||
'focus:bg-fill-primary-alpha-5 focus-visible:outline-none focus:text-text-primary',
|
||||
'focus:bg-fill-primary focus-visible:outline-none focus:text-text-primary',
|
||||
|
||||
// Destructive variant styling
|
||||
'data-[variant=destructive]:text-text-error',
|
||||
@@ -156,7 +156,7 @@ function DropdownMenuSeparator ({
|
||||
return (
|
||||
<DropdownMenuPrimitive.Separator
|
||||
data-slot="dropdown-menu-separator"
|
||||
className={cn('-mx-2 my-2 border-border-grey-tertiary border-t', className)}
|
||||
className={cn('-mx-2 my-2 border-border-primary border-t', className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
@@ -198,8 +198,8 @@ function DropdownMenuSubTrigger ({
|
||||
data-inset={inset}
|
||||
className={cn(
|
||||
// Focus and open states
|
||||
'focus:bg-fill-primary-alpha-5 focus-visible:outline-none focus:text-text-primary',
|
||||
'data-[state=open]:bg-fill-primary-alpha-5 data-[state=open]:text-text-primary',
|
||||
'focus:bg-fill-secondary focus-visible:outline-none focus:text-text-primary',
|
||||
'data-[state=open]:bg-fill-secondary data-[state=open]:text-text-primary',
|
||||
|
||||
// Base layout and appearance
|
||||
'flex cursor-pointer items-center rounded-300 px-2 py-1 min-h-[32px]',
|
||||
|
||||
@@ -10,7 +10,7 @@ const baseInputStyles = cn(
|
||||
// Selection styling
|
||||
'selection:bg-fill-theme-thick selection:text-text-on-fill focus:caret-fill-theme-thick',
|
||||
|
||||
'bg-fill-transparent',
|
||||
'bg-fill-content',
|
||||
|
||||
// Layout
|
||||
'flex min-w-0',
|
||||
@@ -22,7 +22,7 @@ const baseInputStyles = cn(
|
||||
'outline-none',
|
||||
|
||||
// File input styling
|
||||
'file:inline-flex file:border-0 file:bg-fill-transparent file:text-sm file:font-medium',
|
||||
'file:inline-flex file:border-0 file:bg-fill-content file:text-sm file:font-medium',
|
||||
|
||||
// Disabled state
|
||||
'disabled:pointer-events-none disabled:cursor-not-allowed',
|
||||
@@ -34,13 +34,13 @@ const inputVariants = cva(
|
||||
variants: {
|
||||
variant: {
|
||||
// Default variant with focus styles
|
||||
default: 'border-border-grey-tertiary border focus-visible:border-border-theme-thick focus-visible:ring-border-theme-thick focus-visible:ring-[0.5px] disabled:border-border-grey-tertiary disabled:bg-fill-primary-alpha-5 disabled:text-text-tertiary hover:border-border-grey-tertiary-hover',
|
||||
default: 'border-border-primary border focus-visible:border-border-theme-thick focus-visible:ring-border-theme-thick focus-visible:ring-[0.5px] disabled:border-border-primary disabled:bg-fill-primary-hover disabled:text-text-tertiary hover:border-border-primary-hover',
|
||||
|
||||
// Destructive variant for error states
|
||||
destructive: 'border border-border-error-thick focus-visible:border-border-error-thick focus-visible:ring-border-error-thick focus-visible:ring-[0.5px] focus:caret-text-primary disabled:border-border-grey-tertiary disabled:bg-fill-primary-alpha-5 disabled:text-text-tertiary',
|
||||
destructive: 'border border-border-error-thick focus-visible:border-border-error-thick focus-visible:ring-border-error-thick focus-visible:ring-[0.5px] focus:caret-text-primary disabled:border-border-primary disabled:bg-fill-primary-hover disabled:text-text-tertiary',
|
||||
|
||||
// Ghost variant without visible borders
|
||||
ghost: 'border-fill-transparent focus-visible:border-transparent focus-visible:ring-transparent disabled:border-fill-transparent disabled:bg-fill-transparent disabled:text-text-tertiary',
|
||||
ghost: 'border-none focus-visible:border-transparent focus-visible:ring-transparent disabled:border-fill-transparent disabled:bg-fill-transparent disabled:text-text-tertiary',
|
||||
},
|
||||
size: {
|
||||
// Small size input
|
||||
|
||||
@@ -24,7 +24,7 @@ function PopoverContent ({
|
||||
align={align}
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
'bg-surface-primary data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-popover-content-transform-origin) outline-hidden shadow-popover z-50 w-72 rounded-400 p-0',
|
||||
'bg-background-primary data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-popover-content-transform-origin) outline-hidden shadow-popover z-50 w-72 rounded-400 p-0',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
|
||||
@@ -8,10 +8,6 @@ const progressVariants = cva(
|
||||
variants: {
|
||||
variant: {
|
||||
default: '',
|
||||
success: '',
|
||||
warning: '',
|
||||
destructive: '',
|
||||
theme: '',
|
||||
},
|
||||
isIndeterminate: {
|
||||
true: 'animate-progress-container',
|
||||
@@ -26,15 +22,11 @@ const progressVariants = cva(
|
||||
);
|
||||
|
||||
const circleVariants = cva(
|
||||
'fill-fill-transparent h-5 w-5',
|
||||
'fill-fill-content h-5 w-5',
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: 'stroke-fill-tertiary',
|
||||
theme: 'stroke-fill-tertiary',
|
||||
success: 'stroke-fill-tertiary',
|
||||
warning: 'stroke-fill-tertiary',
|
||||
destructive: 'stroke-fill-tertiary',
|
||||
default: 'stroke-fill-secondary',
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
@@ -44,15 +36,11 @@ const circleVariants = cva(
|
||||
);
|
||||
|
||||
const progressCircleVariants = cva(
|
||||
'fill-fill-transparent transition-all h-5 w-5',
|
||||
'fill-fill-content transition-all h-5 w-5',
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: 'stroke-text-on-fill',
|
||||
theme: 'stroke-fill-theme-thick',
|
||||
success: 'stroke-fill-success-thick',
|
||||
warning: 'stroke-warning-thick',
|
||||
destructive: 'stroke-error-thick',
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
|
||||
@@ -15,7 +15,7 @@ function Separator ({
|
||||
decorative={decorative}
|
||||
orientation={orientation}
|
||||
className={cn(
|
||||
'bg-border-grey-tertiary shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
|
||||
'bg-border-primary shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
|
||||
@@ -18,13 +18,13 @@ const Toaster = ({ ...props }: ToasterProps) => {
|
||||
className:
|
||||
'!shadow-toast px-4 py-2 max-w-[360px] w-fit gap-2 bg-surface-secondary border-none text-text-on-fill rounded-400',
|
||||
classNames: {
|
||||
actionButton: '!text-text-theme font-semibold !px-2 hover:!text-text-theme-hover bg-transparent hover:bg-transparent',
|
||||
actionButton: '!text-text-action font-semibold !px-2 hover:!text-text-action-hover bg-transparent hover:bg-transparent',
|
||||
},
|
||||
}}
|
||||
icons={{
|
||||
success: <ToastSuccess className="h-5 w-5 text-fill-success-thick" />,
|
||||
warning: <ToastWarning className="h-5 w-5 text-fill-warning-thick" />,
|
||||
error: <ToastError className="h-5 w-5 text-fill-error-thick" />,
|
||||
success: <ToastSuccess className="h-5 w-5 text-icon-success-thick" />,
|
||||
warning: <ToastWarning className="h-5 w-5 text-icon-warning-thick" />,
|
||||
error: <ToastError className="h-5 w-5 text-icon-error-thick" />,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
|
||||
@@ -44,7 +44,7 @@ function TooltipContent ({
|
||||
'data-[side=top]:slide-in-from-bottom-2',
|
||||
|
||||
// Styling and layout
|
||||
'text-balance shadow-tooltip z-50 origin-[--radix-tooltip-content-transform-origin]',
|
||||
'shadow-tooltip z-50 origin-[--radix-tooltip-content-transform-origin]',
|
||||
'w-fit rounded-400 bg-surface-secondary px-3 py-2 text-sm text-text-on-fill',
|
||||
'flex flex-col',
|
||||
|
||||
|
||||
@@ -3,255 +3,247 @@
|
||||
* AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
|
||||
*
|
||||
* Generated from: semantic.dark.json
|
||||
* Generated time: 2025-03-31T09:19:58.458Z
|
||||
* Generated time: 2025-04-21T06:10:00.796Z
|
||||
*
|
||||
* To modify these values, edit the source JSON files and run the token conversion script:
|
||||
* node scripts/system-token/convert-tokens.cjs
|
||||
*/
|
||||
|
||||
:root[data-dark-mode=true] {
|
||||
--text-primary: #e4e8f5;
|
||||
--text-secondary: #b5bbd3;
|
||||
--text-tertiary: #6f748c;
|
||||
--text-quaternary: #21232a;
|
||||
--text-inverse: #21232a;
|
||||
--text-on-fill: #ffffff;
|
||||
--text-theme: #00b5ff;
|
||||
--text-theme-hover: #0092d6;
|
||||
--text-action: #00b5ff;
|
||||
--text-action-hover: #0092d6;
|
||||
--text-info: #00b5ff;
|
||||
--text-info-hover: #0092d6;
|
||||
--text-success: #248569;
|
||||
--text-success-hover: #29725d;
|
||||
--text-warning: #db7e21;
|
||||
--text-warning-hover: #b75f17;
|
||||
--text-error: #f33641;
|
||||
--text-error-hover: #ff5050;
|
||||
--text-purple: #9327ff;
|
||||
--text-purple-hover: #7a1dcc;
|
||||
--icon-primary: #e4e8f5;
|
||||
--icon-secondary: #b5bbd3;
|
||||
--icon-tertiary: #6f748c;
|
||||
--icon-quaternary: #21232a;
|
||||
--icon-white: #ffffff;
|
||||
--icon-purple-thick: #ffffff;
|
||||
--icon-purple-thick-hover: #ffffff;
|
||||
--border-grey-primary: #f8faff;
|
||||
--border-grey-primary-hover: #e4e8f5;
|
||||
--border-grey-secondary: #ced3e6;
|
||||
--border-grey-secondary-hover: #b5bbd3;
|
||||
--border-grey-tertiary: #3c3f4e;
|
||||
--border-grey-tertiary-hover: #54596e;
|
||||
--border-grey-quaternary: #21232a;
|
||||
--border-grey-quaternary-hover: #272930;
|
||||
--border-transparent: #ffffff00;
|
||||
--border-theme-thick: #00b5ff;
|
||||
--border-theme-thick-hover: #0092d6;
|
||||
--border-info-thick: #00b5ff;
|
||||
--border-info-thick-hover: #0092d6;
|
||||
--border-success-thick: #248569;
|
||||
--border-success-thick-hover: #29725d;
|
||||
--border-warning-thick: #db7e21;
|
||||
--border-warning-thick-hover: #b75f17;
|
||||
--border-error-thick: #f33641;
|
||||
--border-error-thick-hover: #ff5050;
|
||||
--border-purple-thick: #9327ff;
|
||||
--border-purple-thick-hover: #7a1dcc;
|
||||
--fill-primary: #f8faff;
|
||||
--fill-primary-hover: #e4e8f5;
|
||||
--fill-secondary: #ced3e6;
|
||||
--fill-secondary-hover: #b5bbd3;
|
||||
--fill-tertiary: #6f748c;
|
||||
--fill-tertiary-hover: #989eb7;
|
||||
--fill-quaternary: #21232a;
|
||||
--fill-quaternary-hover: #272930;
|
||||
--fill-transparent: #ffffff00;
|
||||
--fill-primary-alpha-5: #f9fafd0d;
|
||||
--fill-primary-alpha-5-hover: #f9fafd1a;
|
||||
--fill-primary-alpha-80: #1f2329cc;
|
||||
--fill-primary-alpha-80-hover: #1f2329b2;
|
||||
--fill-white: #ffffff;
|
||||
--fill-white-alpha: #ffffff33;
|
||||
--fill-white-alpha-hover: #ffffff4d;
|
||||
--fill-black: #000000;
|
||||
--fill-theme-light: #e3f6ff;
|
||||
--fill-theme-light-hover: #a9e2ff;
|
||||
--fill-theme-thick: #00b5ff;
|
||||
--fill-theme-thick-hover: #4ec1ff;
|
||||
--fill-theme-select: #00b5ff26;
|
||||
--fill-info-light: #e3f6ff;
|
||||
--fill-info-light-hover: #a9e2ff;
|
||||
--fill-info-thick: #00b5ff;
|
||||
--fill-info-thick-hover: #0092d6;
|
||||
--fill-success-light: #ecf9f5;
|
||||
--fill-success-light-hover: #c3e5d8;
|
||||
--fill-success-thick: #248569;
|
||||
--fill-success-thick-hover: #29725d;
|
||||
--fill-warning-light: #fff3d5;
|
||||
--fill-warning-light-hover: #ffe4ab;
|
||||
--fill-warning-thick: #db7e21;
|
||||
--fill-warning-thick-hover: #b75f17;
|
||||
--fill-error-light: #ffd2dd;
|
||||
--fill-error-light-hover: #ffa5b4;
|
||||
--fill-error-thick: #e71d32;
|
||||
--fill-error-thick-hover: #f33641;
|
||||
--fill-error-select: #f336411a;
|
||||
--fill-purple-light: #f1e0ff;
|
||||
--fill-purple-light-hover: #e1b3ff;
|
||||
--fill-purple-thick-hover: #7a1dcc;
|
||||
--fill-purple-thick: #9327ff;
|
||||
--surface-primary: #272930;
|
||||
--surface-overlay: #00000099;
|
||||
--surface-secondary: #3C3F4E;
|
||||
--background-primary: #21232a;
|
||||
--background-secondary: #272930;
|
||||
--background-tertiary: #3c3f4e;
|
||||
--background-quaternary: #54596e;
|
||||
--badge-color-rose-rose-light-1: #fcf2f2;
|
||||
--badge-color-rose-rose-light-2: #fae3e3;
|
||||
--badge-color-rose-rose-light-3: #fad9d9;
|
||||
--badge-color-rose-rose-thick-1: #edadad;
|
||||
--badge-color-rose-rose-thick-2: #cc4e4e;
|
||||
--badge-color-rose-rose-thick-3: #702828;
|
||||
--badge-color-papaya-papaya-light-1: #fcf4f0;
|
||||
--badge-color-papaya-papaya-light-2: #fae8de;
|
||||
--badge-color-papaya-papaya-light-3: #fadfd2;
|
||||
--badge-color-papaya-papaya-thick-1: #f0bda3;
|
||||
--badge-color-papaya-papaya-thick-2: #d67240;
|
||||
--badge-color-papaya-papaya-thick-3: #6b3215;
|
||||
--badge-color-tangerine-tangerine-light-1: #fff7ed;
|
||||
--badge-color-tangerine-tangerine-light-2: #fcedd9;
|
||||
--badge-color-tangerine-tangerine-light-3: #fae5ca;
|
||||
--badge-color-tangerine-tangerine-thick-1: #f2cb99;
|
||||
--badge-color-tangerine-tangerine-thick-2: #db8f2c;
|
||||
--badge-color-tangerine-tangerine-thick-3: #613b0a;
|
||||
--badge-color-mango-mango-light-1: #fff9ec;
|
||||
--badge-color-mango-mango-light-2: #fcf1d7;
|
||||
--badge-color-mango-mango-light-3: #fae9c3;
|
||||
--badge-color-mango-mango-thick-1: #f5d68e;
|
||||
--badge-color-mango-mango-thick-2: #e0a416;
|
||||
--badge-color-mango-mango-thick-3: #5c4102;
|
||||
--badge-color-lemon-lemon-light-1: #fffbe8;
|
||||
--badge-color-lemon-lemon-light-2: #fcf5cf;
|
||||
--badge-color-lemon-lemon-light-3: #faefb9;
|
||||
--badge-color-lemon-lemon-thick-1: #f5e282;
|
||||
--badge-color-lemon-lemon-thick-2: #e0bb00;
|
||||
--badge-color-lemon-lemon-thick-3: #574800;
|
||||
--badge-color-olive-olive-light-1: #f9fae6;
|
||||
--badge-color-olive-olive-light-2: #f6f7d0;
|
||||
--badge-color-olive-olive-light-3: #f0f2b3;
|
||||
--badge-color-olive-olive-thick-1: #dbde83;
|
||||
--badge-color-olive-olive-thick-2: #adb204;
|
||||
--badge-color-olive-olive-thick-3: #4a4c03;
|
||||
--badge-color-lime-lime-light-1: #f6f9e6;
|
||||
--badge-color-lime-lime-light-2: #eef5ce;
|
||||
--badge-color-lime-lime-light-3: #e7f0bb;
|
||||
--badge-color-lime-lime-thick-1: #cfdb91;
|
||||
--badge-color-lime-lime-thick-2: #92a822;
|
||||
--badge-color-lime-lime-thick-3: #414d05;
|
||||
--badge-color-grass-grass-light-1: #f4faeb;
|
||||
--badge-color-grass-grass-light-2: #e9f5d7;
|
||||
--badge-color-grass-grass-light-3: #def0c5;
|
||||
--badge-color-grass-grass-thick-1: #bfd998;
|
||||
--badge-color-grass-grass-thick-2: #75a828;
|
||||
--badge-color-grass-grass-thick-3: #334d0c;
|
||||
--badge-color-forest-forest-light-1: #f1faf0;
|
||||
--badge-color-forest-forest-light-2: #e2f5df;
|
||||
--badge-color-forest-forest-light-3: #d7f0d3;
|
||||
--badge-color-forest-forest-thick-1: #a8d6a1;
|
||||
--badge-color-forest-forest-thick-2: #49a33b;
|
||||
--badge-color-forest-forest-thick-3: #1e4f16;
|
||||
--badge-color-jade-jade-light-1: #f0faf6;
|
||||
--badge-color-jade-jade-light-2: #dff5eb;
|
||||
--badge-color-jade-jade-light-3: #cef0e1;
|
||||
--badge-color-jade-jade-thick-1: #90d1b5;
|
||||
--badge-color-jade-jade-thick-2: #1c9963;
|
||||
--badge-color-jade-jade-thick-3: #075231;
|
||||
--badge-color-aqua-aqua-light-1: #f0f9fa;
|
||||
--badge-color-aqua-aqua-light-2: #dff3f5;
|
||||
--badge-color-aqua-aqua-light-3: #ccecf0;
|
||||
--badge-color-aqua-aqua-thick-1: #83ccd4;
|
||||
--badge-color-aqua-aqua-thick-2: #008e9e;
|
||||
--badge-color-aqua-aqua-thick-3: #004e57;
|
||||
--badge-color-azure-azure-light-1: #f0f6fa;
|
||||
--badge-color-azure-azure-light-2: #e1eef7;
|
||||
--badge-color-azure-azure-light-3: #d3e6f5;
|
||||
--badge-color-azure-azure-thick-1: #88c0eb;
|
||||
--badge-color-azure-azure-thick-2: #0877cc;
|
||||
--badge-color-azure-azure-thick-3: #154469;
|
||||
--badge-color-denim-denim-light-1: #f0f3fa;
|
||||
--badge-color-denim-denim-light-2: #e3ebfa;
|
||||
--badge-color-denim-denim-light-3: #d7e2f7;
|
||||
--badge-color-denim-denim-thick-1: #9ab6ed;
|
||||
--badge-color-denim-denim-thick-2: #3267d1;
|
||||
--badge-color-denim-denim-thick-3: #223c70;
|
||||
--badge-color-mauve-mauve-light-1: #f2f2fc;
|
||||
--badge-color-mauve-mauve-thick-2: #5555e0;
|
||||
--badge-color-mauve-mauve-thick-3: #36366b;
|
||||
--badge-color-mauve-mauve-thick-1: #aeaef5;
|
||||
--badge-color-lavender-lavender-light-1: #f6f3fc;
|
||||
--badge-color-lavender-lavender-light-2: #ebe3fa;
|
||||
--badge-color-lavender-lavender-light-3: #e4daf7;
|
||||
--badge-color-lavender-lavender-thick-1: #c1aaf0;
|
||||
--badge-color-lavender-lavender-thick-2: #8153db;
|
||||
--badge-color-lavender-lavender-thick-3: #462f75;
|
||||
--badge-color-lilac-liliac-light-1: #f7f0fa;
|
||||
--badge-color-lilac-liliac-light-2: #f0e1f7;
|
||||
--badge-color-lilac-liliac-light-3: #edd7f7;
|
||||
--badge-color-lilac-liliac-thick-1: #d3a9e8;
|
||||
--badge-color-lilac-liliac-thick-2: #9e4cc7;
|
||||
--badge-color-lilac-liliac-thick-3: #562d6b;
|
||||
--badge-color-mallow-mallow-light-1: #faf0fa;
|
||||
--badge-color-mallow-mallow-light-2: #f5e1f4;
|
||||
--badge-color-mallow-mallow-light-3: #f5d7f4;
|
||||
--badge-color-mallow-mallow-thick-1: #dea4dc;
|
||||
--badge-color-mallow-mallow-thick-2: #b240af;
|
||||
--badge-color-mallow-mallow-thick-3: #632861;
|
||||
--badge-color-camellia-camellia-light-1: #f9eff3;
|
||||
--badge-color-camellia-camellia-light-2: #f7e1eb;
|
||||
--badge-color-camellia-camellia-light-3: #f7d7e5;
|
||||
--badge-color-camellia-camellia-thick-1: #e5a3c0;
|
||||
--badge-color-camellia-camellia-thick-2: #c24279;
|
||||
--badge-color-camellia-camellia-thick-3: #6e2343;
|
||||
--badge-color-smoke-smoke-light-1: #f5f5f5;
|
||||
--badge-color-smoke-smoke-light-2: #e8e8e8;
|
||||
--badge-color-smoke-smoke-light-3: #dedede;
|
||||
--badge-color-smoke-smoke-thick-1: #b8b8b8;
|
||||
--badge-color-smoke-smoke-thick-2: #6e6e6e;
|
||||
--badge-color-smoke-smoke-thick-3: #404040;
|
||||
--badge-color-iron-icon-light-1: #f2f4f7;
|
||||
--badge-color-iron-icon-light-2: #e6e9f0;
|
||||
--badge-color-iron-icon-light-3: #dadee5;
|
||||
--badge-color-iron-icon-thick-1: #b0b5bf;
|
||||
--badge-color-iron-icon-thick-2: #666f80;
|
||||
--badge-color-iron-icon-thick-3: #394152;
|
||||
--shadow-sm: 0px;
|
||||
--shadow-md: 0px;
|
||||
--brand-skyline: #00b5ff;
|
||||
--brand-aqua: #00c8ff;
|
||||
--brand-violet: #9327ff;
|
||||
--brand-amethyst: #8427e0;
|
||||
--brand-berry: #e3006d;
|
||||
--brand-coral: #fb006d;
|
||||
--brand-golden: #f7931e;
|
||||
--brand-amber: #ffbd00;
|
||||
--brand-lemon: #ffce00;
|
||||
--other-colors-text-highlight: #a9e2ff;
|
||||
--spacing-spacing-0: 0px;
|
||||
--spacing-spacing-xs: 4px;
|
||||
--spacing-spacing-s: 6px;
|
||||
--spacing-spacing-m: 8px;
|
||||
--spacing-spacing-l: 12px;
|
||||
--spacing-spacing-xl: 16px;
|
||||
--spacing-spacing-xxl: 20px;
|
||||
--spacing-spacing-full: 1000px;
|
||||
--border-radius-border-radius-0: 0px;
|
||||
--border-radius-border-radius-xs: 4px;
|
||||
--border-radius-border-radius-s: 6px;
|
||||
--border-radius-border-radius-m: 8px;
|
||||
--border-radius-border-radius-l: 12px;
|
||||
--border-radius-border-radius-xl: 16px;
|
||||
--border-radius-border-radius-xxl: 20px;
|
||||
--border-radius-border-radius-full: 1000px;
|
||||
--text-primary: #e4e8f5;
|
||||
--text-secondary: #b5bbd3;
|
||||
--text-tertiary: #6f748c;
|
||||
--text-quaternary: #21232a;
|
||||
--text-on-fill: #ffffff;
|
||||
--text-action: #00b5ff;
|
||||
--text-action-hover: #4ec1ff;
|
||||
--text-info: #00b5ff;
|
||||
--text-info-hover: #4ec1ff;
|
||||
--text-success: #248569;
|
||||
--text-success-hover: #48a982;
|
||||
--text-warning: #db7e21;
|
||||
--text-warning-hover: #ffa02e;
|
||||
--text-error: #f33641;
|
||||
--text-error-hover: #ff5050;
|
||||
--text-featured: #9327ff;
|
||||
--text-featured-hover: #bc58ff;
|
||||
--icon-primary: #e4e8f5;
|
||||
--icon-secondary: #b5bbd3;
|
||||
--icon-tertiary: #6f748c;
|
||||
--icon-quaternary: #21232a;
|
||||
--icon-info-thick: #00b5ff;
|
||||
--icon-info-thick-hover: #4ec1ff;
|
||||
--icon-success-thick: #248569;
|
||||
--icon-success-thick-hover: #48a982;
|
||||
--icon-warning-thick: #db7e21;
|
||||
--icon-warning-thick-hover: #ffa02e;
|
||||
--icon-error-thick: #f33641;
|
||||
--icon-error-thick-hover: #ff5050;
|
||||
--icon-featured-thick: #9327ff;
|
||||
--icon-featured-thick-hover: #bc58ff;
|
||||
--icon-on-fill: #ffffff;
|
||||
--border-primary: #3c3f4e;
|
||||
--border-primary-hover: #54596e;
|
||||
--border-secondary: #ced3e6;
|
||||
--border-secondary-hover: #e4e8f5;
|
||||
--border-tertiary: #f8faff;
|
||||
--border-tertiary-hover: #ffffff;
|
||||
--border-theme-thick: #00b5ff;
|
||||
--border-theme-thick-hover: #0092d6;
|
||||
--border-info-thick: #00b5ff;
|
||||
--border-info-thick-hover: #4ec1ff;
|
||||
--border-success-thick: #248569;
|
||||
--border-success-thick-hover: #48a982;
|
||||
--border-warning-thick: #db7e21;
|
||||
--border-warning-thick-hover: #ffa02e;
|
||||
--border-error-thick: #f33641;
|
||||
--border-error-thick-hover: #ff5050;
|
||||
--border-featured-thick: #9327ff;
|
||||
--border-featured-thick-hover: #bc58ff;
|
||||
--fill-primary: #272930;
|
||||
--fill-primary-hover: #3c3f4e;
|
||||
--fill-secondary: #6f748c;
|
||||
--fill-secondary-hover: #989eb7;
|
||||
--fill-tertiary: #ced3e6;
|
||||
--fill-tertiary-hover: #e4e8f5;
|
||||
--fill-quaternary: #f8faff;
|
||||
--fill-quaternary-hover: #ffffff;
|
||||
--fill-content: #ffffff00;
|
||||
--fill-content-hover: #f9fafd0d;
|
||||
--fill-content-visible: #f9fafd0d;
|
||||
--fill-content-visible-hover: #f9fafd1a;
|
||||
--fill-theme-thick: #00b5ff;
|
||||
--fill-theme-thick-hover: #0092d6;
|
||||
--fill-theme-select: #00b5ff26;
|
||||
--fill-info-light: #a9e2ff;
|
||||
--fill-info-light-hover: #e3f6ff;
|
||||
--fill-info-thick: #00b5ff;
|
||||
--fill-info-thick-hover: #4ec1ff;
|
||||
--fill-success-light: #c3e5d8;
|
||||
--fill-success-light-hover: #ecf9f5;
|
||||
--fill-warning-light: #ffe4ab;
|
||||
--fill-warning-light-hover: #fff3d5;
|
||||
--fill-error-light: #ffa5b4;
|
||||
--fill-error-light-hover: #ffd2dd;
|
||||
--fill-error-thick: #f33641;
|
||||
--fill-error-thick-hover: #ff5050;
|
||||
--fill-error-select: #f336411a;
|
||||
--fill-featured-light: #e1b3ff;
|
||||
--fill-featured-light-hover: #f1e0ff;
|
||||
--fill-featured-thick: #9327ff;
|
||||
--fill-featured-thick-hover: #bc58ff;
|
||||
--surface-primary: #272930;
|
||||
--surface-primary-hover: #3c3f4e;
|
||||
--surface-secondary: #3c3f4e;
|
||||
--surface-overlay: #00000099;
|
||||
--background-primary: #21232a;
|
||||
--background-secondary: #272930;
|
||||
--background-tertiary: #3c3f4e;
|
||||
--background-quaternary: #54596e;
|
||||
--badge-color-1-1-1-light: #fcf2f2;
|
||||
--badge-color-1-1-2-light: #fae3e3;
|
||||
--badge-color-1-1-3-light: #fad9d9;
|
||||
--badge-color-1-1-1-thick: #edadad;
|
||||
--badge-color-1-1-2-thick: #cc4e4e;
|
||||
--badge-color-1-1-3-thick: #702828;
|
||||
--badge-color-2-2-1-light: #fcf4f0;
|
||||
--badge-color-2-2-2-light: #fae8de;
|
||||
--badge-color-2-2-3-light: #fadfd2;
|
||||
--badge-color-2-2-1-thick: #f0bda3;
|
||||
--badge-color-2-2-2-thick: #d67240;
|
||||
--badge-color-2-2-3-thick: #6b3215;
|
||||
--badge-color-3-3-1-light: #fff7ed;
|
||||
--badge-color-3-3-2-light: #fcedd9;
|
||||
--badge-color-3-3-3-light: #fae5ca;
|
||||
--badge-color-3-3-1-thick: #f2cb99;
|
||||
--badge-color-3-3-2-thick: #db8f2c;
|
||||
--badge-color-3-3-3-thick: #613b0a;
|
||||
--badge-color-4-4-1-light: #fff9ec;
|
||||
--badge-color-4-4-2-light: #fcf1d7;
|
||||
--badge-color-4-4-3-light: #fae9c3;
|
||||
--badge-color-4-4-1-thick: #f5d68e;
|
||||
--badge-color-4-4-2-thick: #e0a416;
|
||||
--badge-color-4-4-3-thick: #5c4102;
|
||||
--badge-color-5-5-1-light: #fffbe8;
|
||||
--badge-color-5-5-2-light: #fcf5cf;
|
||||
--badge-color-5-5-3-light: #faefb9;
|
||||
--badge-color-5-5-1-thick: #f5e282;
|
||||
--badge-color-5-5-2-thick: #e0bb00;
|
||||
--badge-color-5-5-3-thick: #574800;
|
||||
--badge-color-6-6-1-light: #f9fae6;
|
||||
--badge-color-6-6-2-light: #f6f7d0;
|
||||
--badge-color-6-6-3-light: #f0f2b3;
|
||||
--badge-color-6-6-1-thick: #dbde83;
|
||||
--badge-color-6-6-2-thick: #adb204;
|
||||
--badge-color-6-6-3-thick: #4a4c03;
|
||||
--badge-color-7-7-1-light: #f6f9e6;
|
||||
--badge-color-7-7-2-light: #eef5ce;
|
||||
--badge-color-7-7-3-light: #e7f0bb;
|
||||
--badge-color-7-7-1-thick: #cfdb91;
|
||||
--badge-color-7-7-2-thick: #92a822;
|
||||
--badge-color-7-7-3-thick: #414d05;
|
||||
--badge-color-8-8-1-light: #f4faeb;
|
||||
--badge-color-8-8-2-light: #e9f5d7;
|
||||
--badge-color-8-8-3-light: #def0c5;
|
||||
--badge-color-8-8-1-thick: #bfd998;
|
||||
--badge-color-8-8-2-thick: #75a828;
|
||||
--badge-color-8-8-3-thick: #334d0c;
|
||||
--badge-color-9-9-1-light: #f1faf0;
|
||||
--badge-color-9-9-2-light: #e2f5df;
|
||||
--badge-color-9-9-3-light: #d7f0d3;
|
||||
--badge-color-9-9-1-thick: #a8d6a1;
|
||||
--badge-color-9-9-2-thick: #49a33b;
|
||||
--badge-color-9-9-3-thick: #1e4f16;
|
||||
--badge-color-10-10-1-light: #f0faf6;
|
||||
--badge-color-10-10-2-light: #dff5eb;
|
||||
--badge-color-10-10-3-light: #cef0e1;
|
||||
--badge-color-10-10-1-thick: #90d1b5;
|
||||
--badge-color-10-10-2-thick: #1c9963;
|
||||
--badge-color-10-10-3-thick: #075231;
|
||||
--badge-color-11-11-1-light: #f0f9fa;
|
||||
--badge-color-11-11-2-light: #dff3f5;
|
||||
--badge-color-11-11-3-light: #ccecf0;
|
||||
--badge-color-11-11-1-thick: #83ccd4;
|
||||
--badge-color-11-11-2-thick: #008e9e;
|
||||
--badge-color-11-11-3-thick: #004e57;
|
||||
--badge-color-12-12-1-light: #f0f6fa;
|
||||
--badge-color-12-12-2-light: #e1eef7;
|
||||
--badge-color-12-12-3-light: #d3e6f5;
|
||||
--badge-color-12-12-1-thick: #88c0eb;
|
||||
--badge-color-12-12-2-thick: #0877cc;
|
||||
--badge-color-12-12-3-thick: #154469;
|
||||
--badge-color-13-13-1-light: #f0f3fa;
|
||||
--badge-color-13-13-2-light: #e3ebfa;
|
||||
--badge-color-13-13-3-light: #d7e2f7;
|
||||
--badge-color-13-13-1-thick: #9ab6ed;
|
||||
--badge-color-13-13-2-thick: #3267d1;
|
||||
--badge-color-13-13-3-thick: #223c70;
|
||||
--badge-color-14-14-1-light: #f2f2fc;
|
||||
--badge-color-14-14-2-light: #e6e6fa;
|
||||
--badge-color-14-14-3-light: #dcdcf7;
|
||||
--badge-color-14-14-1-thick: #aeaef5;
|
||||
--badge-color-14-14-2-thick: #5555e0;
|
||||
--badge-color-14-14-3-thick: #36366b;
|
||||
--badge-color-15-15-1-light: #f6f3fc;
|
||||
--badge-color-15-15-2-light: #ebe3fa;
|
||||
--badge-color-15-15-3-light: #e4daf7;
|
||||
--badge-color-15-15-1-thick: #c1aaf0;
|
||||
--badge-color-15-15-2-thick: #8153db;
|
||||
--badge-color-15-15-3-thick: #462f75;
|
||||
--badge-color-16-16-1-light: #f7f0fa;
|
||||
--badge-color-16-16-2-light: #f0e1f7;
|
||||
--badge-color-16-16-3-light: #edd7f7;
|
||||
--badge-color-16-16-1-thick: #d3a9e8;
|
||||
--badge-color-16-16-2-thick: #9e4cc7;
|
||||
--badge-color-16-16-3-thick: #562d6b;
|
||||
--badge-color-17-17-1-light: #faf0fa;
|
||||
--badge-color-17-17-2-light: #f5e1f4;
|
||||
--badge-color-17-17-3-light: #f5d7f4;
|
||||
--badge-color-17-17-1-thick: #dea4dc;
|
||||
--badge-color-17-17-2-thick: #b240af;
|
||||
--badge-color-17-17-3-thick: #632861;
|
||||
--badge-color-18-18-1-light: #f9eff3;
|
||||
--badge-color-18-18-2-light: #f7e1eb;
|
||||
--badge-color-18-18-3-light: #f7d7e5;
|
||||
--badge-color-18-18-1-thick: #e5a3c0;
|
||||
--badge-color-18-18-2-thick: #c24279;
|
||||
--badge-color-18-18-3-thick: #6e2343;
|
||||
--badge-color-19-19-1-light: #f5f5f5;
|
||||
--badge-color-19-19-2-light: #e8e8e8;
|
||||
--badge-color-19-19-3-light: #dedede;
|
||||
--badge-color-19-19-1-thick: #b8b8b8;
|
||||
--badge-color-19-19-2-thick: #6e6e6e;
|
||||
--badge-color-19-19-3-thick: #404040;
|
||||
--badge-color-20-20-1-light: #f2f4f7;
|
||||
--badge-color-20-20-2-light: #e6e9f0;
|
||||
--badge-color-20-20-3-light: #dadee5;
|
||||
--badge-color-20-20-1-thick: #b0b5bf;
|
||||
--badge-color-20-20-2-thick: #666f80;
|
||||
--badge-color-20-20-3-thick: #394152;
|
||||
--brand-skyline: #00b5ff;
|
||||
--brand-aqua: #00c8ff;
|
||||
--brand-violet: #9327ff;
|
||||
--brand-amethyst: #8427e0;
|
||||
--brand-berry: #e3006d;
|
||||
--brand-coral: #fb006d;
|
||||
--brand-golden: #f7931e;
|
||||
--brand-amber: #ffbd00;
|
||||
--brand-lemon: #ffce00;
|
||||
--other-colors-text-highlight: #a9e2ff;
|
||||
--spacing-spacing-0: 0px;
|
||||
--spacing-spacing-xs: 4px;
|
||||
--spacing-spacing-s: 6px;
|
||||
--spacing-spacing-m: 8px;
|
||||
--spacing-spacing-l: 12px;
|
||||
--spacing-spacing-xl: 16px;
|
||||
--spacing-spacing-xxl: 20px;
|
||||
--spacing-spacing-full: 1000px;
|
||||
--border-radius-border-radius-0: 0px;
|
||||
--border-radius-border-radius-xs: 4px;
|
||||
--border-radius-border-radius-s: 6px;
|
||||
--border-radius-border-radius-m: 8px;
|
||||
--border-radius-border-radius-l: 12px;
|
||||
--border-radius-border-radius-xl: 16px;
|
||||
--border-radius-border-radius-xxl: 20px;
|
||||
--border-radius-border-radius-full: 1000px;
|
||||
}
|
||||
|
||||
@@ -3,255 +3,247 @@
|
||||
* AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
|
||||
*
|
||||
* Generated from: semantic.light.json
|
||||
* Generated time: 2025-03-31T09:19:58.455Z
|
||||
* Generated time: 2025-04-21T06:10:00.794Z
|
||||
*
|
||||
* To modify these values, edit the source JSON files and run the token conversion script:
|
||||
* node scripts/system-token/convert-tokens.cjs
|
||||
*/
|
||||
|
||||
:root {
|
||||
--text-primary: #21232a;
|
||||
--text-secondary: #6f748c;
|
||||
--text-tertiary: #b5bbd3;
|
||||
--text-quaternary: #e4e8f5;
|
||||
--text-inverse: #ffffff;
|
||||
--text-on-fill: #ffffff;
|
||||
--text-theme: #00b5ff;
|
||||
--text-theme-hover: #0092d6;
|
||||
--text-action: #00b5ff;
|
||||
--text-action-hover: #0092d6;
|
||||
--text-info: #00b5ff;
|
||||
--text-info-hover: #0092d6;
|
||||
--text-success: #248569;
|
||||
--text-success-hover: #29725d;
|
||||
--text-warning: #db7e21;
|
||||
--text-warning-hover: #b75f17;
|
||||
--text-error: #e71d32;
|
||||
--text-error-hover: #ad1625;
|
||||
--text-purple: #9327ff;
|
||||
--text-purple-hover: #7a1dcc;
|
||||
--icon-primary: #21232a;
|
||||
--icon-secondary: #6f748c;
|
||||
--icon-tertiary: #b5bbd3;
|
||||
--icon-quaternary: #e4e8f5;
|
||||
--icon-white: #ffffff;
|
||||
--icon-purple-thick: #9327ff;
|
||||
--icon-purple-thick-hover: #7a1dcc;
|
||||
--border-grey-primary: #21232a;
|
||||
--border-grey-primary-hover: #272930;
|
||||
--border-grey-secondary: #3c3f4e;
|
||||
--border-grey-secondary-hover: #54596e;
|
||||
--border-grey-tertiary: #ced3e6;
|
||||
--border-grey-tertiary-hover: #b5bbd3;
|
||||
--border-grey-quaternary: #f8faff;
|
||||
--border-grey-quaternary-hover: #e4e8f5;
|
||||
--border-transparent: #ffffff00;
|
||||
--border-theme-thick: #00b5ff;
|
||||
--border-theme-thick-hover: #0092d6;
|
||||
--border-info-thick: #00b5ff;
|
||||
--border-info-thick-hover: #0092d6;
|
||||
--border-success-thick: #248569;
|
||||
--border-success-thick-hover: #29725d;
|
||||
--border-warning-thick: #db7e21;
|
||||
--border-warning-thick-hover: #b75f17;
|
||||
--border-error-thick: #e71d32;
|
||||
--border-error-thick-hover: #ad1625;
|
||||
--border-purple-thick: #9327ff;
|
||||
--border-purple-thick-hover: #7a1dcc;
|
||||
--fill-primary: #21232a;
|
||||
--fill-primary-hover: #272930;
|
||||
--fill-secondary: #6f748c;
|
||||
--fill-secondary-hover: #989eb7;
|
||||
--fill-tertiary: #ced3e6;
|
||||
--fill-tertiary-hover: #b5bbd3;
|
||||
--fill-quaternary: #f8faff;
|
||||
--fill-quaternary-hover: #e4e8f5;
|
||||
--fill-transparent: #ffffff00;
|
||||
--fill-primary-alpha-5: #1f23290d;
|
||||
--fill-primary-alpha-5-hover: #1f23291a;
|
||||
--fill-primary-alpha-80: #1f2329cc;
|
||||
--fill-primary-alpha-80-hover: #1f2329b2;
|
||||
--fill-white: #ffffff;
|
||||
--fill-white-alpha: #ffffff33;
|
||||
--fill-white-alpha-hover: #ffffff4d;
|
||||
--fill-black: #000000;
|
||||
--fill-theme-light: #e3f6ff;
|
||||
--fill-theme-light-hover: #a9e2ff;
|
||||
--fill-theme-thick: #00b5ff;
|
||||
--fill-theme-thick-hover: #0092d6;
|
||||
--fill-theme-select: #00b5ff26;
|
||||
--fill-info-light: #e3f6ff;
|
||||
--fill-info-light-hover: #a9e2ff;
|
||||
--fill-info-thick: #00b5ff;
|
||||
--fill-info-thick-hover: #0092d6;
|
||||
--fill-success-light: #ecf9f5;
|
||||
--fill-success-light-hover: #c3e5d8;
|
||||
--fill-success-thick: #248569;
|
||||
--fill-success-thick-hover: #29725d;
|
||||
--fill-warning-light: #fff3d5;
|
||||
--fill-warning-light-hover: #ffe4ab;
|
||||
--fill-warning-thick: #db7e21;
|
||||
--fill-warning-thick-hover: #b75f17;
|
||||
--fill-error-light: #ffd2dd;
|
||||
--fill-error-light-hover: #ffa5b4;
|
||||
--fill-error-thick: #e71d32;
|
||||
--fill-error-thick-hover: #ad1625;
|
||||
--fill-error-select: #f336411a;
|
||||
--fill-purple-light: #f1e0ff;
|
||||
--fill-purple-light-hover: #e1b3ff;
|
||||
--fill-purple-thick-hover: #7a1dcc;
|
||||
--fill-purple-thick: #9327ff;
|
||||
--surface-primary: #ffffff;
|
||||
--surface-overlay: #00000099;
|
||||
--surface-secondary: #21232A;
|
||||
--background-primary: #ffffff;
|
||||
--background-secondary: #f8faff;
|
||||
--background-tertiary: #e4e8f5;
|
||||
--background-quaternary: #ced3e6;
|
||||
--badge-color-rose-rose-light-1: #fcf2f2;
|
||||
--badge-color-rose-rose-light-2: #fae3e3;
|
||||
--badge-color-rose-rose-light-3: #fad9d9;
|
||||
--badge-color-rose-rose-thick-1: #edadad;
|
||||
--badge-color-rose-rose-thick-2: #cc4e4e;
|
||||
--badge-color-rose-rose-thick-3: #702828;
|
||||
--badge-color-papaya-papaya-light-1: #fcf4f0;
|
||||
--badge-color-papaya-papaya-light-2: #fae8de;
|
||||
--badge-color-papaya-papaya-light-3: #fadfd2;
|
||||
--badge-color-papaya-papaya-thick-1: #f0bda3;
|
||||
--badge-color-papaya-papaya-thick-2: #d67240;
|
||||
--badge-color-papaya-papaya-thick-3: #6b3215;
|
||||
--badge-color-tangerine-tangerine-light-1: #fff7ed;
|
||||
--badge-color-tangerine-tangerine-light-2: #fcedd9;
|
||||
--badge-color-tangerine-tangerine-light-3: #fae5ca;
|
||||
--badge-color-tangerine-tangerine-thick-1: #f2cb99;
|
||||
--badge-color-tangerine-tangerine-thick-2: #db8f2c;
|
||||
--badge-color-tangerine-tangerine-thick-3: #613b0a;
|
||||
--badge-color-mango-mango-light-1: #fff9ec;
|
||||
--badge-color-mango-mango-light-2: #fcf1d7;
|
||||
--badge-color-mango-mango-light-3: #fae9c3;
|
||||
--badge-color-mango-mango-thick-1: #f5d68e;
|
||||
--badge-color-mango-mango-thick-2: #e0a416;
|
||||
--badge-color-mango-mango-thick-3: #5c4102;
|
||||
--badge-color-lemon-lemon-light-1: #fffbe8;
|
||||
--badge-color-lemon-lemon-light-2: #fcf5cf;
|
||||
--badge-color-lemon-lemon-light-3: #faefb9;
|
||||
--badge-color-lemon-lemon-thick-1: #f5e282;
|
||||
--badge-color-lemon-lemon-thick-2: #e0bb00;
|
||||
--badge-color-lemon-lemon-thick-3: #574800;
|
||||
--badge-color-olive-olive-light-1: #f9fae6;
|
||||
--badge-color-olive-olive-light-2: #f6f7d0;
|
||||
--badge-color-olive-olive-light-3: #f0f2b3;
|
||||
--badge-color-olive-olive-thick-1: #dbde83;
|
||||
--badge-color-olive-olive-thick-2: #adb204;
|
||||
--badge-color-olive-olive-thick-3: #4a4c03;
|
||||
--badge-color-lime-lime-light-1: #f6f9e6;
|
||||
--badge-color-lime-lime-light-2: #eef5ce;
|
||||
--badge-color-lime-lime-light-3: #e7f0bb;
|
||||
--badge-color-lime-lime-thick-1: #cfdb91;
|
||||
--badge-color-lime-lime-thick-2: #92a822;
|
||||
--badge-color-lime-lime-thick-3: #414d05;
|
||||
--badge-color-grass-grass-light-1: #f4faeb;
|
||||
--badge-color-grass-grass-light-2: #e9f5d7;
|
||||
--badge-color-grass-grass-light-3: #def0c5;
|
||||
--badge-color-grass-grass-thick-1: #bfd998;
|
||||
--badge-color-grass-grass-thick-2: #75a828;
|
||||
--badge-color-grass-grass-thick-3: #334d0c;
|
||||
--badge-color-forest-forest-light-1: #f1faf0;
|
||||
--badge-color-forest-forest-light-2: #e2f5df;
|
||||
--badge-color-forest-forest-light-3: #d7f0d3;
|
||||
--badge-color-forest-forest-thick-1: #a8d6a1;
|
||||
--badge-color-forest-forest-thick-2: #49a33b;
|
||||
--badge-color-forest-forest-thick-3: #1e4f16;
|
||||
--badge-color-jade-jade-light-1: #f0faf6;
|
||||
--badge-color-jade-jade-light-2: #dff5eb;
|
||||
--badge-color-jade-jade-light-3: #cef0e1;
|
||||
--badge-color-jade-jade-thick-1: #90d1b5;
|
||||
--badge-color-jade-jade-thick-2: #1c9963;
|
||||
--badge-color-jade-jade-thick-3: #075231;
|
||||
--badge-color-aqua-aqua-light-1: #f0f9fa;
|
||||
--badge-color-aqua-aqua-light-2: #dff3f5;
|
||||
--badge-color-aqua-aqua-light-3: #ccecf0;
|
||||
--badge-color-aqua-aqua-thick-1: #83ccd4;
|
||||
--badge-color-aqua-aqua-thick-2: #008e9e;
|
||||
--badge-color-aqua-aqua-thick-3: #004e57;
|
||||
--badge-color-azure-azure-light-1: #f0f6fa;
|
||||
--badge-color-azure-azure-light-2: #e1eef7;
|
||||
--badge-color-azure-azure-light-3: #d3e6f5;
|
||||
--badge-color-azure-azure-thick-1: #88c0eb;
|
||||
--badge-color-azure-azure-thick-2: #0877cc;
|
||||
--badge-color-azure-azure-thick-3: #154469;
|
||||
--badge-color-denim-denim-light-1: #f0f3fa;
|
||||
--badge-color-denim-denim-light-2: #e3ebfa;
|
||||
--badge-color-denim-denim-light-3: #d7e2f7;
|
||||
--badge-color-denim-denim-thick-1: #9ab6ed;
|
||||
--badge-color-denim-denim-thick-2: #3267d1;
|
||||
--badge-color-denim-denim-thick-3: #223c70;
|
||||
--badge-color-mauve-mauve-light-1: #f2f2fc;
|
||||
--badge-color-mauve-mauve-thick-2: #5555e0;
|
||||
--badge-color-mauve-mauve-thick-3: #36366b;
|
||||
--badge-color-mauve-mauve-thick-1: #aeaef5;
|
||||
--badge-color-lavender-lavender-light-1: #f6f3fc;
|
||||
--badge-color-lavender-lavender-light-2: #ebe3fa;
|
||||
--badge-color-lavender-lavender-light-3: #e4daf7;
|
||||
--badge-color-lavender-lavender-thick-1: #c1aaf0;
|
||||
--badge-color-lavender-lavender-thick-2: #8153db;
|
||||
--badge-color-lavender-lavender-thick-3: #462f75;
|
||||
--badge-color-lilac-liliac-light-1: #f7f0fa;
|
||||
--badge-color-lilac-liliac-light-2: #f0e1f7;
|
||||
--badge-color-lilac-liliac-light-3: #edd7f7;
|
||||
--badge-color-lilac-liliac-thick-1: #d3a9e8;
|
||||
--badge-color-lilac-liliac-thick-2: #9e4cc7;
|
||||
--badge-color-lilac-liliac-thick-3: #562d6b;
|
||||
--badge-color-mallow-mallow-light-1: #faf0fa;
|
||||
--badge-color-mallow-mallow-light-2: #f5e1f4;
|
||||
--badge-color-mallow-mallow-light-3: #f5d7f4;
|
||||
--badge-color-mallow-mallow-thick-1: #dea4dc;
|
||||
--badge-color-mallow-mallow-thick-2: #b240af;
|
||||
--badge-color-mallow-mallow-thick-3: #632861;
|
||||
--badge-color-camellia-camellia-light-1: #f9eff3;
|
||||
--badge-color-camellia-camellia-light-2: #f7e1eb;
|
||||
--badge-color-camellia-camellia-light-3: #f7d7e5;
|
||||
--badge-color-camellia-camellia-thick-1: #e5a3c0;
|
||||
--badge-color-camellia-camellia-thick-2: #c24279;
|
||||
--badge-color-camellia-camellia-thick-3: #6e2343;
|
||||
--badge-color-smoke-smoke-light-1: #f5f5f5;
|
||||
--badge-color-smoke-smoke-light-2: #e8e8e8;
|
||||
--badge-color-smoke-smoke-light-3: #dedede;
|
||||
--badge-color-smoke-smoke-thick-1: #b8b8b8;
|
||||
--badge-color-smoke-smoke-thick-2: #6e6e6e;
|
||||
--badge-color-smoke-smoke-thick-3: #404040;
|
||||
--badge-color-iron-icon-light-1: #f2f4f7;
|
||||
--badge-color-iron-icon-light-2: #e6e9f0;
|
||||
--badge-color-iron-icon-light-3: #dadee5;
|
||||
--badge-color-iron-icon-thick-1: #b0b5bf;
|
||||
--badge-color-iron-icon-thick-2: #666f80;
|
||||
--badge-color-iron-icon-thick-3: #394152;
|
||||
--shadow-sm: 0px;
|
||||
--shadow-md: 0px;
|
||||
--brand-skyline: #00b5ff;
|
||||
--brand-aqua: #00c8ff;
|
||||
--brand-violet: #9327ff;
|
||||
--brand-amethyst: #8427e0;
|
||||
--brand-berry: #e3006d;
|
||||
--brand-coral: #fb006d;
|
||||
--brand-golden: #f7931e;
|
||||
--brand-amber: #ffbd00;
|
||||
--brand-lemon: #ffce00;
|
||||
--other-colors-text-highlight: #a9e2ff;
|
||||
--spacing-spacing-0: 0px;
|
||||
--spacing-spacing-xs: 4px;
|
||||
--spacing-spacing-s: 6px;
|
||||
--spacing-spacing-m: 8px;
|
||||
--spacing-spacing-l: 12px;
|
||||
--spacing-spacing-xl: 16px;
|
||||
--spacing-spacing-xxl: 20px;
|
||||
--spacing-spacing-full: 1000px;
|
||||
--border-radius-border-radius-0: 0px;
|
||||
--border-radius-border-radius-xs: 4px;
|
||||
--border-radius-border-radius-s: 6px;
|
||||
--border-radius-border-radius-m: 8px;
|
||||
--border-radius-border-radius-l: 12px;
|
||||
--border-radius-border-radius-xl: 16px;
|
||||
--border-radius-border-radius-xxl: 20px;
|
||||
--border-radius-border-radius-full: 1000px;
|
||||
--text-primary: #21232a;
|
||||
--text-secondary: #6f748c;
|
||||
--text-tertiary: #b5bbd3;
|
||||
--text-quaternary: #e4e8f5;
|
||||
--text-on-fill: #ffffff;
|
||||
--text-action: #0092d6;
|
||||
--text-action-hover: #0078c0;
|
||||
--text-info: #0092d6;
|
||||
--text-info-hover: #0078c0;
|
||||
--text-success: #248569;
|
||||
--text-success-hover: #29725d;
|
||||
--text-warning: #db7e21;
|
||||
--text-warning-hover: #b75f17;
|
||||
--text-error: #e71d32;
|
||||
--text-error-hover: #ad1625;
|
||||
--text-featured: #9327ff;
|
||||
--text-featured-hover: #7a1dcc;
|
||||
--icon-primary: #21232a;
|
||||
--icon-secondary: #6f748c;
|
||||
--icon-tertiary: #b5bbd3;
|
||||
--icon-quaternary: #e4e8f5;
|
||||
--icon-info-thick: #0092d6;
|
||||
--icon-info-thick-hover: #0078c0;
|
||||
--icon-success-thick: #248569;
|
||||
--icon-success-thick-hover: #29725d;
|
||||
--icon-warning-thick: #db7e21;
|
||||
--icon-warning-thick-hover: #b75f17;
|
||||
--icon-error-thick: #e71d32;
|
||||
--icon-error-thick-hover: #ad1625;
|
||||
--icon-featured-thick: #9327ff;
|
||||
--icon-featured-thick-hover: #7a1dcc;
|
||||
--icon-on-fill: #ffffff;
|
||||
--border-primary: #e4e8f5;
|
||||
--border-primary-hover: #ced3e6;
|
||||
--border-secondary: #3c3f4e;
|
||||
--border-secondary-hover: #54596e;
|
||||
--border-tertiary: #21232a;
|
||||
--border-tertiary-hover: #272930;
|
||||
--border-theme-thick: #00b5ff;
|
||||
--border-theme-thick-hover: #0092d6;
|
||||
--border-info-thick: #00b5ff;
|
||||
--border-info-thick-hover: #0092d6;
|
||||
--border-success-thick: #248569;
|
||||
--border-success-thick-hover: #29725d;
|
||||
--border-warning-thick: #db7e21;
|
||||
--border-warning-thick-hover: #b75f17;
|
||||
--border-error-thick: #e71d32;
|
||||
--border-error-thick-hover: #ad1625;
|
||||
--border-featured-thick: #9327ff;
|
||||
--border-featured-thick-hover: #7a1dcc;
|
||||
--fill-primary: #f8faff;
|
||||
--fill-primary-hover: #e4e8f5;
|
||||
--fill-secondary: #ced3e6;
|
||||
--fill-secondary-hover: #b5bbd3;
|
||||
--fill-tertiary: #6f748c;
|
||||
--fill-tertiary-hover: #989eb7;
|
||||
--fill-quaternary: #21232a;
|
||||
--fill-quaternary-hover: #272930;
|
||||
--fill-content: #ffffff00;
|
||||
--fill-content-hover: #1f23290d;
|
||||
--fill-content-visible: #1f23290d;
|
||||
--fill-content-visible-hover: #1f23291a;
|
||||
--fill-theme-thick: #00b5ff;
|
||||
--fill-theme-thick-hover: #0092d6;
|
||||
--fill-theme-select: #00b5ff26;
|
||||
--fill-info-light: #e3f6ff;
|
||||
--fill-info-light-hover: #a9e2ff;
|
||||
--fill-info-thick: #00b5ff;
|
||||
--fill-info-thick-hover: #0092d6;
|
||||
--fill-success-light: #ecf9f5;
|
||||
--fill-success-light-hover: #c3e5d8;
|
||||
--fill-warning-light: #fff3d5;
|
||||
--fill-warning-light-hover: #ffe4ab;
|
||||
--fill-error-light: #ffd2dd;
|
||||
--fill-error-light-hover: #ffa5b4;
|
||||
--fill-error-thick: #e71d32;
|
||||
--fill-error-thick-hover: #ad1625;
|
||||
--fill-error-select: #f336411a;
|
||||
--fill-featured-light: #f1e0ff;
|
||||
--fill-featured-light-hover: #e1b3ff;
|
||||
--fill-featured-thick: #9327ff;
|
||||
--fill-featured-thick-hover: #7a1dcc;
|
||||
--surface-primary: #ffffff;
|
||||
--surface-primary-hover: #f8faff;
|
||||
--surface-secondary: #21232a;
|
||||
--surface-overlay: #00000099;
|
||||
--background-primary: #ffffff;
|
||||
--background-secondary: #f8faff;
|
||||
--background-tertiary: #e4e8f5;
|
||||
--background-quaternary: #ced3e6;
|
||||
--badge-color-1-1-1-light: #fcf2f2;
|
||||
--badge-color-1-1-2-light: #fae3e3;
|
||||
--badge-color-1-1-3-light: #fad9d9;
|
||||
--badge-color-1-1-1-thick: #edadad;
|
||||
--badge-color-1-1-2-thick: #cc4e4e;
|
||||
--badge-color-1-1-3-thick: #702828;
|
||||
--badge-color-2-2-1-light: #fcf4f0;
|
||||
--badge-color-2-2-2-light: #fae8de;
|
||||
--badge-color-2-2-3-light: #fadfd2;
|
||||
--badge-color-2-2-1-thick: #f0bda3;
|
||||
--badge-color-2-2-2-thick: #d67240;
|
||||
--badge-color-2-2-3-thick: #6b3215;
|
||||
--badge-color-3-3-1-light: #fff7ed;
|
||||
--badge-color-3-3-2-light: #fcedd9;
|
||||
--badge-color-3-3-3-light: #fae5ca;
|
||||
--badge-color-3-3-1-thick: #f2cb99;
|
||||
--badge-color-3-3-2-thick: #db8f2c;
|
||||
--badge-color-3-3-3-thick: #613b0a;
|
||||
--badge-color-4-4-1-light: #fff9ec;
|
||||
--badge-color-4-4-2-light: #fcf1d7;
|
||||
--badge-color-4-4-3-light: #fae9c3;
|
||||
--badge-color-4-4-1-thick: #f5d68e;
|
||||
--badge-color-4-4-2-thick: #e0a416;
|
||||
--badge-color-4-4-3-thick: #5c4102;
|
||||
--badge-color-5-5-1-light: #fffbe8;
|
||||
--badge-color-5-5-2-light: #fcf5cf;
|
||||
--badge-color-5-5-3-light: #faefb9;
|
||||
--badge-color-5-5-1-thick: #f5e282;
|
||||
--badge-color-5-5-2-thick: #e0bb00;
|
||||
--badge-color-5-5-3-thick: #574800;
|
||||
--badge-color-6-6-1-light: #f9fae6;
|
||||
--badge-color-6-6-2-light: #f6f7d0;
|
||||
--badge-color-6-6-3-light: #f0f2b3;
|
||||
--badge-color-6-6-1-thick: #dbde83;
|
||||
--badge-color-6-6-2-thick: #adb204;
|
||||
--badge-color-6-6-3-thick: #4a4c03;
|
||||
--badge-color-7-7-1-light: #f6f9e6;
|
||||
--badge-color-7-7-2-light: #eef5ce;
|
||||
--badge-color-7-7-3-light: #e7f0bb;
|
||||
--badge-color-7-7-1-thick: #cfdb91;
|
||||
--badge-color-7-7-2-thick: #92a822;
|
||||
--badge-color-7-7-3-thick: #414d05;
|
||||
--badge-color-8-8-1-light: #f4faeb;
|
||||
--badge-color-8-8-2-light: #e9f5d7;
|
||||
--badge-color-8-8-3-light: #def0c5;
|
||||
--badge-color-8-8-1-thick: #bfd998;
|
||||
--badge-color-8-8-2-thick: #75a828;
|
||||
--badge-color-8-8-3-thick: #334d0c;
|
||||
--badge-color-9-9-1-light: #f1faf0;
|
||||
--badge-color-9-9-2-light: #e2f5df;
|
||||
--badge-color-9-9-3-light: #d7f0d3;
|
||||
--badge-color-9-9-1-thick: #a8d6a1;
|
||||
--badge-color-9-9-2-thick: #49a33b;
|
||||
--badge-color-9-9-3-thick: #1e4f16;
|
||||
--badge-color-10-10-1-light: #f0faf6;
|
||||
--badge-color-10-10-2-light: #dff5eb;
|
||||
--badge-color-10-10-3-light: #cef0e1;
|
||||
--badge-color-10-10-1-thick: #90d1b5;
|
||||
--badge-color-10-10-2-thick: #1c9963;
|
||||
--badge-color-10-10-3-thick: #075231;
|
||||
--badge-color-11-11-1-light: #f0f9fa;
|
||||
--badge-color-11-11-2-light: #dff3f5;
|
||||
--badge-color-11-11-3-light: #ccecf0;
|
||||
--badge-color-11-11-1-thick: #83ccd4;
|
||||
--badge-color-11-11-2-thick: #008e9e;
|
||||
--badge-color-11-11-3-thick: #004e57;
|
||||
--badge-color-12-12-1-light: #f0f6fa;
|
||||
--badge-color-12-12-2-light: #e1eef7;
|
||||
--badge-color-12-12-3-light: #d3e6f5;
|
||||
--badge-color-12-12-1-thick: #88c0eb;
|
||||
--badge-color-12-12-2-thick: #0877cc;
|
||||
--badge-color-12-12-3-thick: #154469;
|
||||
--badge-color-13-13-1-light: #f0f3fa;
|
||||
--badge-color-13-13-2-light: #e3ebfa;
|
||||
--badge-color-13-13-3-light: #d7e2f7;
|
||||
--badge-color-13-13-1-thick: #9ab6ed;
|
||||
--badge-color-13-13-2-thick: #3267d1;
|
||||
--badge-color-13-13-3-thick: #223c70;
|
||||
--badge-color-14-14-1-light: #f2f2fc;
|
||||
--badge-color-14-14-2-light: #e6e6fa;
|
||||
--badge-color-14-14-3-light: #dcdcf7;
|
||||
--badge-color-14-14-1-thick: #aeaef5;
|
||||
--badge-color-14-14-2-thick: #5555e0;
|
||||
--badge-color-14-14-3-thick: #36366b;
|
||||
--badge-color-15-15-1-light: #f6f3fc;
|
||||
--badge-color-15-15-2-light: #ebe3fa;
|
||||
--badge-color-15-15-3-light: #e4daf7;
|
||||
--badge-color-15-15-1-thick: #c1aaf0;
|
||||
--badge-color-15-15-2-thick: #8153db;
|
||||
--badge-color-15-15-3-thick: #462f75;
|
||||
--badge-color-16-16-1-light: #f7f0fa;
|
||||
--badge-color-16-16-2-light: #f0e1f7;
|
||||
--badge-color-16-16-3-light: #edd7f7;
|
||||
--badge-color-16-16-1-thick: #d3a9e8;
|
||||
--badge-color-16-16-2-thick: #9e4cc7;
|
||||
--badge-color-16-16-3-thick: #562d6b;
|
||||
--badge-color-17-17-1-light: #faf0fa;
|
||||
--badge-color-17-17-2-light: #f5e1f4;
|
||||
--badge-color-17-17-3-light: #f5d7f4;
|
||||
--badge-color-17-17-1-thick: #dea4dc;
|
||||
--badge-color-17-17-2-thick: #b240af;
|
||||
--badge-color-17-17-3-thick: #632861;
|
||||
--badge-color-18-18-1-light: #f9eff3;
|
||||
--badge-color-18-18-2-light: #f7e1eb;
|
||||
--badge-color-18-18-3-light: #f7d7e5;
|
||||
--badge-color-18-18-1-thick: #e5a3c0;
|
||||
--badge-color-18-18-2-thick: #c24279;
|
||||
--badge-color-18-18-3-thick: #6e2343;
|
||||
--badge-color-19-19-1-light: #f5f5f5;
|
||||
--badge-color-19-19-2-light: #e8e8e8;
|
||||
--badge-color-19-19-3-light: #dedede;
|
||||
--badge-color-19-19-1-thick: #b8b8b8;
|
||||
--badge-color-19-19-2-thick: #6e6e6e;
|
||||
--badge-color-19-19-3-thick: #404040;
|
||||
--badge-color-20-20-1-light: #f2f4f7;
|
||||
--badge-color-20-20-2-light: #e6e9f0;
|
||||
--badge-color-20-20-3-light: #dadee5;
|
||||
--badge-color-20-20-1-thick: #b0b5bf;
|
||||
--badge-color-20-20-2-thick: #666f80;
|
||||
--badge-color-20-20-3-thick: #394152;
|
||||
--brand-skyline: #00b5ff;
|
||||
--brand-aqua: #00c8ff;
|
||||
--brand-violet: #9327ff;
|
||||
--brand-amethyst: #8427e0;
|
||||
--brand-berry: #e3006d;
|
||||
--brand-coral: #fb006d;
|
||||
--brand-golden: #f7931e;
|
||||
--brand-amber: #ffbd00;
|
||||
--brand-lemon: #ffce00;
|
||||
--other-colors-text-highlight: #a9e2ff;
|
||||
--spacing-spacing-0: 0px;
|
||||
--spacing-spacing-xs: 4px;
|
||||
--spacing-spacing-s: 6px;
|
||||
--spacing-spacing-m: 8px;
|
||||
--spacing-spacing-l: 12px;
|
||||
--spacing-spacing-xl: 16px;
|
||||
--spacing-spacing-xxl: 20px;
|
||||
--spacing-spacing-full: 1000px;
|
||||
--border-radius-border-radius-0: 0px;
|
||||
--border-radius-border-radius-xs: 4px;
|
||||
--border-radius-border-radius-s: 6px;
|
||||
--border-radius-border-radius-m: 8px;
|
||||
--border-radius-border-radius-l: 12px;
|
||||
--border-radius-border-radius-xl: 16px;
|
||||
--border-radius-border-radius-xxl: 20px;
|
||||
--border-radius-border-radius-full: 1000px;
|
||||
}
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
* AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
|
||||
*
|
||||
* This file is auto-generated by convert-tokens.cjs script
|
||||
* Generation time: 2025-03-31T09:19:58.459Z
|
||||
* Generation time: 2025-04-21T06:10:00.797Z
|
||||
*
|
||||
* To modify these colors, edit the source JSON files and run the token conversion script:
|
||||
* node scripts/system-token/convert-tokens.cjs
|
||||
@@ -12,256 +12,250 @@
|
||||
*/
|
||||
|
||||
module.exports = {
|
||||
'text': {
|
||||
'primary': 'var(--text-primary)',
|
||||
'secondary': 'var(--text-secondary)',
|
||||
'tertiary': 'var(--text-tertiary)',
|
||||
'quaternary': 'var(--text-quaternary)',
|
||||
'inverse': 'var(--text-inverse)',
|
||||
'on-fill': 'var(--text-on-fill)',
|
||||
'theme': 'var(--text-theme)',
|
||||
'theme-hover': 'var(--text-theme-hover)',
|
||||
'action': 'var(--text-action)',
|
||||
'action-hover': 'var(--text-action-hover)',
|
||||
'info': 'var(--text-info)',
|
||||
'info-hover': 'var(--text-info-hover)',
|
||||
'success': 'var(--text-success)',
|
||||
'success-hover': 'var(--text-success-hover)',
|
||||
'warning': 'var(--text-warning)',
|
||||
'warning-hover': 'var(--text-warning-hover)',
|
||||
'error': 'var(--text-error)',
|
||||
'error-hover': 'var(--text-error-hover)',
|
||||
'purple': 'var(--text-purple)',
|
||||
'purple-hover': 'var(--text-purple-hover)',
|
||||
"text": {
|
||||
"primary": "var(--text-primary)",
|
||||
"secondary": "var(--text-secondary)",
|
||||
"tertiary": "var(--text-tertiary)",
|
||||
"quaternary": "var(--text-quaternary)",
|
||||
"on-fill": "var(--text-on-fill)",
|
||||
"action": "var(--text-action)",
|
||||
"action-hover": "var(--text-action-hover)",
|
||||
"info": "var(--text-info)",
|
||||
"info-hover": "var(--text-info-hover)",
|
||||
"success": "var(--text-success)",
|
||||
"success-hover": "var(--text-success-hover)",
|
||||
"warning": "var(--text-warning)",
|
||||
"warning-hover": "var(--text-warning-hover)",
|
||||
"error": "var(--text-error)",
|
||||
"error-hover": "var(--text-error-hover)",
|
||||
"featured": "var(--text-featured)",
|
||||
"featured-hover": "var(--text-featured-hover)"
|
||||
},
|
||||
'icon': {
|
||||
'primary': 'var(--icon-primary)',
|
||||
'secondary': 'var(--icon-secondary)',
|
||||
'tertiary': 'var(--icon-tertiary)',
|
||||
'quaternary': 'var(--icon-quaternary)',
|
||||
'white': 'var(--icon-white)',
|
||||
'purple-thick': 'var(--icon-purple-thick)',
|
||||
'purple-thick-hover': 'var(--icon-purple-thick-hover)',
|
||||
"icon": {
|
||||
"primary": "var(--icon-primary)",
|
||||
"secondary": "var(--icon-secondary)",
|
||||
"tertiary": "var(--icon-tertiary)",
|
||||
"quaternary": "var(--icon-quaternary)",
|
||||
"info-thick": "var(--icon-info-thick)",
|
||||
"info-thick-hover": "var(--icon-info-thick-hover)",
|
||||
"success-thick": "var(--icon-success-thick)",
|
||||
"success-thick-hover": "var(--icon-success-thick-hover)",
|
||||
"warning-thick": "var(--icon-warning-thick)",
|
||||
"warning-thick-hover": "var(--icon-warning-thick-hover)",
|
||||
"error-thick": "var(--icon-error-thick)",
|
||||
"error-thick-hover": "var(--icon-error-thick-hover)",
|
||||
"featured-thick": "var(--icon-featured-thick)",
|
||||
"featured-thick-hover": "var(--icon-featured-thick-hover)",
|
||||
"on-fill": "var(--icon-on-fill)"
|
||||
},
|
||||
'border': {
|
||||
'grey-primary': 'var(--border-grey-primary)',
|
||||
'grey-primary-hover': 'var(--border-grey-primary-hover)',
|
||||
'grey-secondary': 'var(--border-grey-secondary)',
|
||||
'grey-secondary-hover': 'var(--border-grey-secondary-hover)',
|
||||
'grey-tertiary': 'var(--border-grey-tertiary)',
|
||||
'grey-tertiary-hover': 'var(--border-grey-tertiary-hover)',
|
||||
'grey-quaternary': 'var(--border-grey-quaternary)',
|
||||
'grey-quaternary-hover': 'var(--border-grey-quaternary-hover)',
|
||||
'transparent': 'var(--border-transparent)',
|
||||
'theme-thick': 'var(--border-theme-thick)',
|
||||
'theme-thick-hover': 'var(--border-theme-thick-hover)',
|
||||
'info-thick': 'var(--border-info-thick)',
|
||||
'info-thick-hover': 'var(--border-info-thick-hover)',
|
||||
'success-thick': 'var(--border-success-thick)',
|
||||
'success-thick-hover': 'var(--border-success-thick-hover)',
|
||||
'warning-thick': 'var(--border-warning-thick)',
|
||||
'warning-thick-hover': 'var(--border-warning-thick-hover)',
|
||||
'error-thick': 'var(--border-error-thick)',
|
||||
'error-thick-hover': 'var(--border-error-thick-hover)',
|
||||
'purple-thick': 'var(--border-purple-thick)',
|
||||
'purple-thick-hover': 'var(--border-purple-thick-hover)',
|
||||
'radius-border-radius-0': 'var(--border-radius-border-radius-0)',
|
||||
'radius-border-radius-xs': 'var(--border-radius-border-radius-xs)',
|
||||
'radius-border-radius-s': 'var(--border-radius-border-radius-s)',
|
||||
'radius-border-radius-m': 'var(--border-radius-border-radius-m)',
|
||||
'radius-border-radius-l': 'var(--border-radius-border-radius-l)',
|
||||
'radius-border-radius-xl': 'var(--border-radius-border-radius-xl)',
|
||||
'radius-border-radius-xxl': 'var(--border-radius-border-radius-xxl)',
|
||||
'radius-border-radius-full': 'var(--border-radius-border-radius-full)',
|
||||
"border": {
|
||||
"primary": "var(--border-primary)",
|
||||
"primary-hover": "var(--border-primary-hover)",
|
||||
"secondary": "var(--border-secondary)",
|
||||
"secondary-hover": "var(--border-secondary-hover)",
|
||||
"tertiary": "var(--border-tertiary)",
|
||||
"tertiary-hover": "var(--border-tertiary-hover)",
|
||||
"theme-thick": "var(--border-theme-thick)",
|
||||
"theme-thick-hover": "var(--border-theme-thick-hover)",
|
||||
"info-thick": "var(--border-info-thick)",
|
||||
"info-thick-hover": "var(--border-info-thick-hover)",
|
||||
"success-thick": "var(--border-success-thick)",
|
||||
"success-thick-hover": "var(--border-success-thick-hover)",
|
||||
"warning-thick": "var(--border-warning-thick)",
|
||||
"warning-thick-hover": "var(--border-warning-thick-hover)",
|
||||
"error-thick": "var(--border-error-thick)",
|
||||
"error-thick-hover": "var(--border-error-thick-hover)",
|
||||
"featured-thick": "var(--border-featured-thick)",
|
||||
"featured-thick-hover": "var(--border-featured-thick-hover)",
|
||||
"radius-border-radius-0": "var(--border-radius-border-radius-0)",
|
||||
"radius-border-radius-xs": "var(--border-radius-border-radius-xs)",
|
||||
"radius-border-radius-s": "var(--border-radius-border-radius-s)",
|
||||
"radius-border-radius-m": "var(--border-radius-border-radius-m)",
|
||||
"radius-border-radius-l": "var(--border-radius-border-radius-l)",
|
||||
"radius-border-radius-xl": "var(--border-radius-border-radius-xl)",
|
||||
"radius-border-radius-xxl": "var(--border-radius-border-radius-xxl)",
|
||||
"radius-border-radius-full": "var(--border-radius-border-radius-full)"
|
||||
},
|
||||
'fill': {
|
||||
'primary': 'var(--fill-primary)',
|
||||
'primary-hover': 'var(--fill-primary-hover)',
|
||||
'secondary': 'var(--fill-secondary)',
|
||||
'secondary-hover': 'var(--fill-secondary-hover)',
|
||||
'tertiary': 'var(--fill-tertiary)',
|
||||
'tertiary-hover': 'var(--fill-tertiary-hover)',
|
||||
'quaternary': 'var(--fill-quaternary)',
|
||||
'quaternary-hover': 'var(--fill-quaternary-hover)',
|
||||
'transparent': 'var(--fill-transparent)',
|
||||
'primary-alpha-5': 'var(--fill-primary-alpha-5)',
|
||||
'primary-alpha-5-hover': 'var(--fill-primary-alpha-5-hover)',
|
||||
'primary-alpha-80': 'var(--fill-primary-alpha-80)',
|
||||
'primary-alpha-80-hover': 'var(--fill-primary-alpha-80-hover)',
|
||||
'white': 'var(--fill-white)',
|
||||
'white-alpha': 'var(--fill-white-alpha)',
|
||||
'white-alpha-hover': 'var(--fill-white-alpha-hover)',
|
||||
'black': 'var(--fill-black)',
|
||||
'theme-light': 'var(--fill-theme-light)',
|
||||
'theme-light-hover': 'var(--fill-theme-light-hover)',
|
||||
'theme-thick': 'var(--fill-theme-thick)',
|
||||
'theme-thick-hover': 'var(--fill-theme-thick-hover)',
|
||||
'theme-select': 'var(--fill-theme-select)',
|
||||
'info-light': 'var(--fill-info-light)',
|
||||
'info-light-hover': 'var(--fill-info-light-hover)',
|
||||
'info-thick': 'var(--fill-info-thick)',
|
||||
'info-thick-hover': 'var(--fill-info-thick-hover)',
|
||||
'success-light': 'var(--fill-success-light)',
|
||||
'success-light-hover': 'var(--fill-success-light-hover)',
|
||||
'success-thick': 'var(--fill-success-thick)',
|
||||
'success-thick-hover': 'var(--fill-success-thick-hover)',
|
||||
'warning-light': 'var(--fill-warning-light)',
|
||||
'warning-light-hover': 'var(--fill-warning-light-hover)',
|
||||
'warning-thick': 'var(--fill-warning-thick)',
|
||||
'warning-thick-hover': 'var(--fill-warning-thick-hover)',
|
||||
'error-light': 'var(--fill-error-light)',
|
||||
'error-light-hover': 'var(--fill-error-light-hover)',
|
||||
'error-thick': 'var(--fill-error-thick)',
|
||||
'error-thick-hover': 'var(--fill-error-thick-hover)',
|
||||
'error-select': 'var(--fill-error-select)',
|
||||
'purple-light': 'var(--fill-purple-light)',
|
||||
'purple-light-hover': 'var(--fill-purple-light-hover)',
|
||||
'purple-thick-hover': 'var(--fill-purple-thick-hover)',
|
||||
'purple-thick': 'var(--fill-purple-thick)',
|
||||
"fill": {
|
||||
"primary": "var(--fill-primary)",
|
||||
"primary-hover": "var(--fill-primary-hover)",
|
||||
"secondary": "var(--fill-secondary)",
|
||||
"secondary-hover": "var(--fill-secondary-hover)",
|
||||
"tertiary": "var(--fill-tertiary)",
|
||||
"tertiary-hover": "var(--fill-tertiary-hover)",
|
||||
"quaternary": "var(--fill-quaternary)",
|
||||
"quaternary-hover": "var(--fill-quaternary-hover)",
|
||||
"content": "var(--fill-content)",
|
||||
"content-hover": "var(--fill-content-hover)",
|
||||
"content-visible": "var(--fill-content-visible)",
|
||||
"content-visible-hover": "var(--fill-content-visible-hover)",
|
||||
"theme-thick": "var(--fill-theme-thick)",
|
||||
"theme-thick-hover": "var(--fill-theme-thick-hover)",
|
||||
"theme-select": "var(--fill-theme-select)",
|
||||
"info-light": "var(--fill-info-light)",
|
||||
"info-light-hover": "var(--fill-info-light-hover)",
|
||||
"info-thick": "var(--fill-info-thick)",
|
||||
"info-thick-hover": "var(--fill-info-thick-hover)",
|
||||
"success-light": "var(--fill-success-light)",
|
||||
"success-light-hover": "var(--fill-success-light-hover)",
|
||||
"warning-light": "var(--fill-warning-light)",
|
||||
"warning-light-hover": "var(--fill-warning-light-hover)",
|
||||
"error-light": "var(--fill-error-light)",
|
||||
"error-light-hover": "var(--fill-error-light-hover)",
|
||||
"error-thick": "var(--fill-error-thick)",
|
||||
"error-thick-hover": "var(--fill-error-thick-hover)",
|
||||
"error-select": "var(--fill-error-select)",
|
||||
"featured-light": "var(--fill-featured-light)",
|
||||
"featured-light-hover": "var(--fill-featured-light-hover)",
|
||||
"featured-thick": "var(--fill-featured-thick)",
|
||||
"featured-thick-hover": "var(--fill-featured-thick-hover)"
|
||||
},
|
||||
'surface': {
|
||||
'primary': 'var(--surface-primary)',
|
||||
'overlay': 'var(--surface-overlay)',
|
||||
'secondary': 'var(--surface-secondary)',
|
||||
"surface": {
|
||||
"primary": "var(--surface-primary)",
|
||||
"primary-hover": "var(--surface-primary-hover)",
|
||||
"secondary": "var(--surface-secondary)",
|
||||
"overlay": "var(--surface-overlay)"
|
||||
},
|
||||
'background': {
|
||||
'primary': 'var(--background-primary)',
|
||||
'secondary': 'var(--background-secondary)',
|
||||
'tertiary': 'var(--background-tertiary)',
|
||||
'quaternary': 'var(--background-quaternary)',
|
||||
"background": {
|
||||
"primary": "var(--background-primary)",
|
||||
"secondary": "var(--background-secondary)",
|
||||
"tertiary": "var(--background-tertiary)",
|
||||
"quaternary": "var(--background-quaternary)"
|
||||
},
|
||||
'badge': {
|
||||
'color-rose-rose-light-1': 'var(--badge-color-rose-rose-light-1)',
|
||||
'color-rose-rose-light-2': 'var(--badge-color-rose-rose-light-2)',
|
||||
'color-rose-rose-light-3': 'var(--badge-color-rose-rose-light-3)',
|
||||
'color-rose-rose-thick-1': 'var(--badge-color-rose-rose-thick-1)',
|
||||
'color-rose-rose-thick-2': 'var(--badge-color-rose-rose-thick-2)',
|
||||
'color-rose-rose-thick-3': 'var(--badge-color-rose-rose-thick-3)',
|
||||
'color-papaya-papaya-light-1': 'var(--badge-color-papaya-papaya-light-1)',
|
||||
'color-papaya-papaya-light-2': 'var(--badge-color-papaya-papaya-light-2)',
|
||||
'color-papaya-papaya-light-3': 'var(--badge-color-papaya-papaya-light-3)',
|
||||
'color-papaya-papaya-thick-1': 'var(--badge-color-papaya-papaya-thick-1)',
|
||||
'color-papaya-papaya-thick-2': 'var(--badge-color-papaya-papaya-thick-2)',
|
||||
'color-papaya-papaya-thick-3': 'var(--badge-color-papaya-papaya-thick-3)',
|
||||
'color-tangerine-tangerine-light-1': 'var(--badge-color-tangerine-tangerine-light-1)',
|
||||
'color-tangerine-tangerine-light-2': 'var(--badge-color-tangerine-tangerine-light-2)',
|
||||
'color-tangerine-tangerine-light-3': 'var(--badge-color-tangerine-tangerine-light-3)',
|
||||
'color-tangerine-tangerine-thick-1': 'var(--badge-color-tangerine-tangerine-thick-1)',
|
||||
'color-tangerine-tangerine-thick-2': 'var(--badge-color-tangerine-tangerine-thick-2)',
|
||||
'color-tangerine-tangerine-thick-3': 'var(--badge-color-tangerine-tangerine-thick-3)',
|
||||
'color-mango-mango-light-1': 'var(--badge-color-mango-mango-light-1)',
|
||||
'color-mango-mango-light-2': 'var(--badge-color-mango-mango-light-2)',
|
||||
'color-mango-mango-light-3': 'var(--badge-color-mango-mango-light-3)',
|
||||
'color-mango-mango-thick-1': 'var(--badge-color-mango-mango-thick-1)',
|
||||
'color-mango-mango-thick-2': 'var(--badge-color-mango-mango-thick-2)',
|
||||
'color-mango-mango-thick-3': 'var(--badge-color-mango-mango-thick-3)',
|
||||
'color-lemon-lemon-light-1': 'var(--badge-color-lemon-lemon-light-1)',
|
||||
'color-lemon-lemon-light-2': 'var(--badge-color-lemon-lemon-light-2)',
|
||||
'color-lemon-lemon-light-3': 'var(--badge-color-lemon-lemon-light-3)',
|
||||
'color-lemon-lemon-thick-1': 'var(--badge-color-lemon-lemon-thick-1)',
|
||||
'color-lemon-lemon-thick-2': 'var(--badge-color-lemon-lemon-thick-2)',
|
||||
'color-lemon-lemon-thick-3': 'var(--badge-color-lemon-lemon-thick-3)',
|
||||
'color-olive-olive-light-1': 'var(--badge-color-olive-olive-light-1)',
|
||||
'color-olive-olive-light-2': 'var(--badge-color-olive-olive-light-2)',
|
||||
'color-olive-olive-light-3': 'var(--badge-color-olive-olive-light-3)',
|
||||
'color-olive-olive-thick-1': 'var(--badge-color-olive-olive-thick-1)',
|
||||
'color-olive-olive-thick-2': 'var(--badge-color-olive-olive-thick-2)',
|
||||
'color-olive-olive-thick-3': 'var(--badge-color-olive-olive-thick-3)',
|
||||
'color-lime-lime-light-1': 'var(--badge-color-lime-lime-light-1)',
|
||||
'color-lime-lime-light-2': 'var(--badge-color-lime-lime-light-2)',
|
||||
'color-lime-lime-light-3': 'var(--badge-color-lime-lime-light-3)',
|
||||
'color-lime-lime-thick-1': 'var(--badge-color-lime-lime-thick-1)',
|
||||
'color-lime-lime-thick-2': 'var(--badge-color-lime-lime-thick-2)',
|
||||
'color-lime-lime-thick-3': 'var(--badge-color-lime-lime-thick-3)',
|
||||
'color-grass-grass-light-1': 'var(--badge-color-grass-grass-light-1)',
|
||||
'color-grass-grass-light-2': 'var(--badge-color-grass-grass-light-2)',
|
||||
'color-grass-grass-light-3': 'var(--badge-color-grass-grass-light-3)',
|
||||
'color-grass-grass-thick-1': 'var(--badge-color-grass-grass-thick-1)',
|
||||
'color-grass-grass-thick-2': 'var(--badge-color-grass-grass-thick-2)',
|
||||
'color-grass-grass-thick-3': 'var(--badge-color-grass-grass-thick-3)',
|
||||
'color-forest-forest-light-1': 'var(--badge-color-forest-forest-light-1)',
|
||||
'color-forest-forest-light-2': 'var(--badge-color-forest-forest-light-2)',
|
||||
'color-forest-forest-light-3': 'var(--badge-color-forest-forest-light-3)',
|
||||
'color-forest-forest-thick-1': 'var(--badge-color-forest-forest-thick-1)',
|
||||
'color-forest-forest-thick-2': 'var(--badge-color-forest-forest-thick-2)',
|
||||
'color-forest-forest-thick-3': 'var(--badge-color-forest-forest-thick-3)',
|
||||
'color-jade-jade-light-1': 'var(--badge-color-jade-jade-light-1)',
|
||||
'color-jade-jade-light-2': 'var(--badge-color-jade-jade-light-2)',
|
||||
'color-jade-jade-light-3': 'var(--badge-color-jade-jade-light-3)',
|
||||
'color-jade-jade-thick-1': 'var(--badge-color-jade-jade-thick-1)',
|
||||
'color-jade-jade-thick-2': 'var(--badge-color-jade-jade-thick-2)',
|
||||
'color-jade-jade-thick-3': 'var(--badge-color-jade-jade-thick-3)',
|
||||
'color-aqua-aqua-light-1': 'var(--badge-color-aqua-aqua-light-1)',
|
||||
'color-aqua-aqua-light-2': 'var(--badge-color-aqua-aqua-light-2)',
|
||||
'color-aqua-aqua-light-3': 'var(--badge-color-aqua-aqua-light-3)',
|
||||
'color-aqua-aqua-thick-1': 'var(--badge-color-aqua-aqua-thick-1)',
|
||||
'color-aqua-aqua-thick-2': 'var(--badge-color-aqua-aqua-thick-2)',
|
||||
'color-aqua-aqua-thick-3': 'var(--badge-color-aqua-aqua-thick-3)',
|
||||
'color-azure-azure-light-1': 'var(--badge-color-azure-azure-light-1)',
|
||||
'color-azure-azure-light-2': 'var(--badge-color-azure-azure-light-2)',
|
||||
'color-azure-azure-light-3': 'var(--badge-color-azure-azure-light-3)',
|
||||
'color-azure-azure-thick-1': 'var(--badge-color-azure-azure-thick-1)',
|
||||
'color-azure-azure-thick-2': 'var(--badge-color-azure-azure-thick-2)',
|
||||
'color-azure-azure-thick-3': 'var(--badge-color-azure-azure-thick-3)',
|
||||
'color-denim-denim-light-1': 'var(--badge-color-denim-denim-light-1)',
|
||||
'color-denim-denim-light-2': 'var(--badge-color-denim-denim-light-2)',
|
||||
'color-denim-denim-light-3': 'var(--badge-color-denim-denim-light-3)',
|
||||
'color-denim-denim-thick-1': 'var(--badge-color-denim-denim-thick-1)',
|
||||
'color-denim-denim-thick-2': 'var(--badge-color-denim-denim-thick-2)',
|
||||
'color-denim-denim-thick-3': 'var(--badge-color-denim-denim-thick-3)',
|
||||
'color-mauve-mauve-light-1': 'var(--badge-color-mauve-mauve-light-1)',
|
||||
'color-mauve-mauve-thick-2': 'var(--badge-color-mauve-mauve-thick-2)',
|
||||
'color-mauve-mauve-thick-3': 'var(--badge-color-mauve-mauve-thick-3)',
|
||||
'color-mauve-mauve-thick-1': 'var(--badge-color-mauve-mauve-thick-1)',
|
||||
'color-lavender-lavender-light-1': 'var(--badge-color-lavender-lavender-light-1)',
|
||||
'color-lavender-lavender-light-2': 'var(--badge-color-lavender-lavender-light-2)',
|
||||
'color-lavender-lavender-light-3': 'var(--badge-color-lavender-lavender-light-3)',
|
||||
'color-lavender-lavender-thick-1': 'var(--badge-color-lavender-lavender-thick-1)',
|
||||
'color-lavender-lavender-thick-2': 'var(--badge-color-lavender-lavender-thick-2)',
|
||||
'color-lavender-lavender-thick-3': 'var(--badge-color-lavender-lavender-thick-3)',
|
||||
'color-lilac-liliac-light-1': 'var(--badge-color-lilac-liliac-light-1)',
|
||||
'color-lilac-liliac-light-2': 'var(--badge-color-lilac-liliac-light-2)',
|
||||
'color-lilac-liliac-light-3': 'var(--badge-color-lilac-liliac-light-3)',
|
||||
'color-lilac-liliac-thick-1': 'var(--badge-color-lilac-liliac-thick-1)',
|
||||
'color-lilac-liliac-thick-2': 'var(--badge-color-lilac-liliac-thick-2)',
|
||||
'color-lilac-liliac-thick-3': 'var(--badge-color-lilac-liliac-thick-3)',
|
||||
'color-mallow-mallow-light-1': 'var(--badge-color-mallow-mallow-light-1)',
|
||||
'color-mallow-mallow-light-2': 'var(--badge-color-mallow-mallow-light-2)',
|
||||
'color-mallow-mallow-light-3': 'var(--badge-color-mallow-mallow-light-3)',
|
||||
'color-mallow-mallow-thick-1': 'var(--badge-color-mallow-mallow-thick-1)',
|
||||
'color-mallow-mallow-thick-2': 'var(--badge-color-mallow-mallow-thick-2)',
|
||||
'color-mallow-mallow-thick-3': 'var(--badge-color-mallow-mallow-thick-3)',
|
||||
'color-camellia-camellia-light-1': 'var(--badge-color-camellia-camellia-light-1)',
|
||||
'color-camellia-camellia-light-2': 'var(--badge-color-camellia-camellia-light-2)',
|
||||
'color-camellia-camellia-light-3': 'var(--badge-color-camellia-camellia-light-3)',
|
||||
'color-camellia-camellia-thick-1': 'var(--badge-color-camellia-camellia-thick-1)',
|
||||
'color-camellia-camellia-thick-2': 'var(--badge-color-camellia-camellia-thick-2)',
|
||||
'color-camellia-camellia-thick-3': 'var(--badge-color-camellia-camellia-thick-3)',
|
||||
'color-smoke-smoke-light-1': 'var(--badge-color-smoke-smoke-light-1)',
|
||||
'color-smoke-smoke-light-2': 'var(--badge-color-smoke-smoke-light-2)',
|
||||
'color-smoke-smoke-light-3': 'var(--badge-color-smoke-smoke-light-3)',
|
||||
'color-smoke-smoke-thick-1': 'var(--badge-color-smoke-smoke-thick-1)',
|
||||
'color-smoke-smoke-thick-2': 'var(--badge-color-smoke-smoke-thick-2)',
|
||||
'color-smoke-smoke-thick-3': 'var(--badge-color-smoke-smoke-thick-3)',
|
||||
'color-iron-icon-light-1': 'var(--badge-color-iron-icon-light-1)',
|
||||
'color-iron-icon-light-2': 'var(--badge-color-iron-icon-light-2)',
|
||||
'color-iron-icon-light-3': 'var(--badge-color-iron-icon-light-3)',
|
||||
'color-iron-icon-thick-1': 'var(--badge-color-iron-icon-thick-1)',
|
||||
'color-iron-icon-thick-2': 'var(--badge-color-iron-icon-thick-2)',
|
||||
'color-iron-icon-thick-3': 'var(--badge-color-iron-icon-thick-3)',
|
||||
"badge": {
|
||||
"color-1-1-1-light": "var(--badge-color-1-1-1-light)",
|
||||
"color-1-1-2-light": "var(--badge-color-1-1-2-light)",
|
||||
"color-1-1-3-light": "var(--badge-color-1-1-3-light)",
|
||||
"color-1-1-1-thick": "var(--badge-color-1-1-1-thick)",
|
||||
"color-1-1-2-thick": "var(--badge-color-1-1-2-thick)",
|
||||
"color-1-1-3-thick": "var(--badge-color-1-1-3-thick)",
|
||||
"color-2-2-1-light": "var(--badge-color-2-2-1-light)",
|
||||
"color-2-2-2-light": "var(--badge-color-2-2-2-light)",
|
||||
"color-2-2-3-light": "var(--badge-color-2-2-3-light)",
|
||||
"color-2-2-1-thick": "var(--badge-color-2-2-1-thick)",
|
||||
"color-2-2-2-thick": "var(--badge-color-2-2-2-thick)",
|
||||
"color-2-2-3-thick": "var(--badge-color-2-2-3-thick)",
|
||||
"color-3-3-1-light": "var(--badge-color-3-3-1-light)",
|
||||
"color-3-3-2-light": "var(--badge-color-3-3-2-light)",
|
||||
"color-3-3-3-light": "var(--badge-color-3-3-3-light)",
|
||||
"color-3-3-1-thick": "var(--badge-color-3-3-1-thick)",
|
||||
"color-3-3-2-thick": "var(--badge-color-3-3-2-thick)",
|
||||
"color-3-3-3-thick": "var(--badge-color-3-3-3-thick)",
|
||||
"color-4-4-1-light": "var(--badge-color-4-4-1-light)",
|
||||
"color-4-4-2-light": "var(--badge-color-4-4-2-light)",
|
||||
"color-4-4-3-light": "var(--badge-color-4-4-3-light)",
|
||||
"color-4-4-1-thick": "var(--badge-color-4-4-1-thick)",
|
||||
"color-4-4-2-thick": "var(--badge-color-4-4-2-thick)",
|
||||
"color-4-4-3-thick": "var(--badge-color-4-4-3-thick)",
|
||||
"color-5-5-1-light": "var(--badge-color-5-5-1-light)",
|
||||
"color-5-5-2-light": "var(--badge-color-5-5-2-light)",
|
||||
"color-5-5-3-light": "var(--badge-color-5-5-3-light)",
|
||||
"color-5-5-1-thick": "var(--badge-color-5-5-1-thick)",
|
||||
"color-5-5-2-thick": "var(--badge-color-5-5-2-thick)",
|
||||
"color-5-5-3-thick": "var(--badge-color-5-5-3-thick)",
|
||||
"color-6-6-1-light": "var(--badge-color-6-6-1-light)",
|
||||
"color-6-6-2-light": "var(--badge-color-6-6-2-light)",
|
||||
"color-6-6-3-light": "var(--badge-color-6-6-3-light)",
|
||||
"color-6-6-1-thick": "var(--badge-color-6-6-1-thick)",
|
||||
"color-6-6-2-thick": "var(--badge-color-6-6-2-thick)",
|
||||
"color-6-6-3-thick": "var(--badge-color-6-6-3-thick)",
|
||||
"color-7-7-1-light": "var(--badge-color-7-7-1-light)",
|
||||
"color-7-7-2-light": "var(--badge-color-7-7-2-light)",
|
||||
"color-7-7-3-light": "var(--badge-color-7-7-3-light)",
|
||||
"color-7-7-1-thick": "var(--badge-color-7-7-1-thick)",
|
||||
"color-7-7-2-thick": "var(--badge-color-7-7-2-thick)",
|
||||
"color-7-7-3-thick": "var(--badge-color-7-7-3-thick)",
|
||||
"color-8-8-1-light": "var(--badge-color-8-8-1-light)",
|
||||
"color-8-8-2-light": "var(--badge-color-8-8-2-light)",
|
||||
"color-8-8-3-light": "var(--badge-color-8-8-3-light)",
|
||||
"color-8-8-1-thick": "var(--badge-color-8-8-1-thick)",
|
||||
"color-8-8-2-thick": "var(--badge-color-8-8-2-thick)",
|
||||
"color-8-8-3-thick": "var(--badge-color-8-8-3-thick)",
|
||||
"color-9-9-1-light": "var(--badge-color-9-9-1-light)",
|
||||
"color-9-9-2-light": "var(--badge-color-9-9-2-light)",
|
||||
"color-9-9-3-light": "var(--badge-color-9-9-3-light)",
|
||||
"color-9-9-1-thick": "var(--badge-color-9-9-1-thick)",
|
||||
"color-9-9-2-thick": "var(--badge-color-9-9-2-thick)",
|
||||
"color-9-9-3-thick": "var(--badge-color-9-9-3-thick)",
|
||||
"color-10-10-1-light": "var(--badge-color-10-10-1-light)",
|
||||
"color-10-10-2-light": "var(--badge-color-10-10-2-light)",
|
||||
"color-10-10-3-light": "var(--badge-color-10-10-3-light)",
|
||||
"color-10-10-1-thick": "var(--badge-color-10-10-1-thick)",
|
||||
"color-10-10-2-thick": "var(--badge-color-10-10-2-thick)",
|
||||
"color-10-10-3-thick": "var(--badge-color-10-10-3-thick)",
|
||||
"color-11-11-1-light": "var(--badge-color-11-11-1-light)",
|
||||
"color-11-11-2-light": "var(--badge-color-11-11-2-light)",
|
||||
"color-11-11-3-light": "var(--badge-color-11-11-3-light)",
|
||||
"color-11-11-1-thick": "var(--badge-color-11-11-1-thick)",
|
||||
"color-11-11-2-thick": "var(--badge-color-11-11-2-thick)",
|
||||
"color-11-11-3-thick": "var(--badge-color-11-11-3-thick)",
|
||||
"color-12-12-1-light": "var(--badge-color-12-12-1-light)",
|
||||
"color-12-12-2-light": "var(--badge-color-12-12-2-light)",
|
||||
"color-12-12-3-light": "var(--badge-color-12-12-3-light)",
|
||||
"color-12-12-1-thick": "var(--badge-color-12-12-1-thick)",
|
||||
"color-12-12-2-thick": "var(--badge-color-12-12-2-thick)",
|
||||
"color-12-12-3-thick": "var(--badge-color-12-12-3-thick)",
|
||||
"color-13-13-1-light": "var(--badge-color-13-13-1-light)",
|
||||
"color-13-13-2-light": "var(--badge-color-13-13-2-light)",
|
||||
"color-13-13-3-light": "var(--badge-color-13-13-3-light)",
|
||||
"color-13-13-1-thick": "var(--badge-color-13-13-1-thick)",
|
||||
"color-13-13-2-thick": "var(--badge-color-13-13-2-thick)",
|
||||
"color-13-13-3-thick": "var(--badge-color-13-13-3-thick)",
|
||||
"color-14-14-1-light": "var(--badge-color-14-14-1-light)",
|
||||
"color-14-14-2-light": "var(--badge-color-14-14-2-light)",
|
||||
"color-14-14-3-light": "var(--badge-color-14-14-3-light)",
|
||||
"color-14-14-1-thick": "var(--badge-color-14-14-1-thick)",
|
||||
"color-14-14-2-thick": "var(--badge-color-14-14-2-thick)",
|
||||
"color-14-14-3-thick": "var(--badge-color-14-14-3-thick)",
|
||||
"color-15-15-1-light": "var(--badge-color-15-15-1-light)",
|
||||
"color-15-15-2-light": "var(--badge-color-15-15-2-light)",
|
||||
"color-15-15-3-light": "var(--badge-color-15-15-3-light)",
|
||||
"color-15-15-1-thick": "var(--badge-color-15-15-1-thick)",
|
||||
"color-15-15-2-thick": "var(--badge-color-15-15-2-thick)",
|
||||
"color-15-15-3-thick": "var(--badge-color-15-15-3-thick)",
|
||||
"color-16-16-1-light": "var(--badge-color-16-16-1-light)",
|
||||
"color-16-16-2-light": "var(--badge-color-16-16-2-light)",
|
||||
"color-16-16-3-light": "var(--badge-color-16-16-3-light)",
|
||||
"color-16-16-1-thick": "var(--badge-color-16-16-1-thick)",
|
||||
"color-16-16-2-thick": "var(--badge-color-16-16-2-thick)",
|
||||
"color-16-16-3-thick": "var(--badge-color-16-16-3-thick)",
|
||||
"color-17-17-1-light": "var(--badge-color-17-17-1-light)",
|
||||
"color-17-17-2-light": "var(--badge-color-17-17-2-light)",
|
||||
"color-17-17-3-light": "var(--badge-color-17-17-3-light)",
|
||||
"color-17-17-1-thick": "var(--badge-color-17-17-1-thick)",
|
||||
"color-17-17-2-thick": "var(--badge-color-17-17-2-thick)",
|
||||
"color-17-17-3-thick": "var(--badge-color-17-17-3-thick)",
|
||||
"color-18-18-1-light": "var(--badge-color-18-18-1-light)",
|
||||
"color-18-18-2-light": "var(--badge-color-18-18-2-light)",
|
||||
"color-18-18-3-light": "var(--badge-color-18-18-3-light)",
|
||||
"color-18-18-1-thick": "var(--badge-color-18-18-1-thick)",
|
||||
"color-18-18-2-thick": "var(--badge-color-18-18-2-thick)",
|
||||
"color-18-18-3-thick": "var(--badge-color-18-18-3-thick)",
|
||||
"color-19-19-1-light": "var(--badge-color-19-19-1-light)",
|
||||
"color-19-19-2-light": "var(--badge-color-19-19-2-light)",
|
||||
"color-19-19-3-light": "var(--badge-color-19-19-3-light)",
|
||||
"color-19-19-1-thick": "var(--badge-color-19-19-1-thick)",
|
||||
"color-19-19-2-thick": "var(--badge-color-19-19-2-thick)",
|
||||
"color-19-19-3-thick": "var(--badge-color-19-19-3-thick)",
|
||||
"color-20-20-1-light": "var(--badge-color-20-20-1-light)",
|
||||
"color-20-20-2-light": "var(--badge-color-20-20-2-light)",
|
||||
"color-20-20-3-light": "var(--badge-color-20-20-3-light)",
|
||||
"color-20-20-1-thick": "var(--badge-color-20-20-1-thick)",
|
||||
"color-20-20-2-thick": "var(--badge-color-20-20-2-thick)",
|
||||
"color-20-20-3-thick": "var(--badge-color-20-20-3-thick)"
|
||||
},
|
||||
'brand': {
|
||||
'skyline': 'var(--brand-skyline)',
|
||||
'aqua': 'var(--brand-aqua)',
|
||||
'violet': 'var(--brand-violet)',
|
||||
'amethyst': 'var(--brand-amethyst)',
|
||||
'berry': 'var(--brand-berry)',
|
||||
'coral': 'var(--brand-coral)',
|
||||
'golden': 'var(--brand-golden)',
|
||||
'amber': 'var(--brand-amber)',
|
||||
'lemon': 'var(--brand-lemon)',
|
||||
},
|
||||
'other': {
|
||||
'colors-text-highlight': 'var(--other-colors-text-highlight)',
|
||||
"brand": {
|
||||
"skyline": "var(--brand-skyline)",
|
||||
"aqua": "var(--brand-aqua)",
|
||||
"violet": "var(--brand-violet)",
|
||||
"amethyst": "var(--brand-amethyst)",
|
||||
"berry": "var(--brand-berry)",
|
||||
"coral": "var(--brand-coral)",
|
||||
"golden": "var(--brand-golden)",
|
||||
"amber": "var(--brand-amber)",
|
||||
"lemon": "var(--brand-lemon)"
|
||||
},
|
||||
"other": {
|
||||
"colors-text-highlight": "var(--other-colors-text-highlight)"
|
||||
}
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user