@razorpay/blade
Version:
The Design System that powers Razorpay
1,348 lines (1,347 loc) • 52 kB
JavaScript
import '../global/index.js';
import { colors as colors$1 } from '../global/colors.js';
import { opacity } from '../global/opacity.js';
import { border } from '../global/border.js';
import { backdropBlur } from '../global/blur.js';
import { breakpoints } from '../global/breakpoints.js';
import { motion } from '../global/motion.js';
import { spacing } from '../global/spacing.js';
import { elevation } from '../global/elevation/elevation.web.js';
import { typography } from '../global/typography.js';
var colors = {
onLight: {
surface: {
background: {
gray: {
subtle: colors$1.neutral.blueGrayLight[100],
moderate: colors$1.neutral.blueGrayLight[50],
intense: colors$1.neutral.blueGrayLight[0]
},
primary: {
subtle: colors$1.chromatic.azure.a50,
intense: colors$1.chromatic.azure[500]
},
sea: {
subtle: colors$1.chromatic.sea[50],
intense: colors$1.chromatic.sea[800]
},
cloud: {
subtle: colors$1.chromatic.cloud[50],
intense: colors$1.chromatic.cloud[800]
}
},
border: {
gray: {
normal: colors$1.neutral.blueGrayLight[300],
subtle: colors$1.neutral.blueGrayLight[200],
muted: colors$1.neutral.blueGrayLight.a912
},
primary: {
normal: colors$1.chromatic.azure[500],
muted: colors$1.chromatic.azure.a100
}
},
text: {
gray: {
normal: colors$1.neutral.blueGrayLight[1300],
subtle: colors$1.neutral.blueGrayLight[1100],
muted: colors$1.neutral.blueGrayLight[700],
disabled: colors$1.neutral.blueGrayLight.a932
},
primary: {
normal: colors$1.chromatic.azure[500]
},
onSea: {
onSubtle: colors$1.chromatic.forest[800],
onIntense: colors$1.chromatic.forest[200]
},
onCloud: {
onSubtle: colors$1.chromatic.azure[600],
onIntense: colors$1.chromatic.azure[200]
},
staticWhite: {
normal: colors$1.neutral.white[500],
subtle: colors$1.neutral.white[450],
muted: colors$1.neutral.white[200],
disabled: colors$1.neutral.white[100]
},
staticBlack: {
normal: colors$1.neutral.black[500],
subtle: colors$1.neutral.black[300],
muted: colors$1.neutral.black[200],
disabled: colors$1.neutral.black[100]
}
},
icon: {
gray: {
normal: colors$1.neutral.blueGrayLight[1300],
subtle: colors$1.neutral.blueGrayLight[1100],
muted: colors$1.neutral.blueGrayLight[700],
disabled: colors$1.neutral.blueGrayLight.a932
},
primary: {
normal: colors$1.chromatic.azure[500]
},
onSea: {
onSubtle: colors$1.chromatic.forest[600],
onIntense: colors$1.chromatic.forest[400]
},
onCloud: {
onSubtle: colors$1.chromatic.azure[400],
onIntense: colors$1.chromatic.azure[300]
},
staticWhite: {
normal: colors$1.neutral.white[500],
subtle: colors$1.neutral.white[450],
muted: colors$1.neutral.white[200],
disabled: colors$1.neutral.white[100]
},
staticBlack: {
normal: colors$1.neutral.black[500],
subtle: colors$1.neutral.black[300],
muted: colors$1.neutral.black[200],
disabled: colors$1.neutral.black[100]
}
}
},
feedback: {
background: {
positive: {
subtle: colors$1.chromatic.emerald.a50,
intense: colors$1.chromatic.emerald[600]
},
negative: {
subtle: colors$1.chromatic.crimson.a50,
intense: colors$1.chromatic.crimson[600]
},
notice: {
subtle: colors$1.chromatic.cider.a50,
intense: colors$1.chromatic.cider[600]
},
information: {
subtle: colors$1.chromatic.sapphire.a50,
intense: colors$1.chromatic.sapphire[600]
},
neutral: {
subtle: colors$1.neutral.blueGrayLight.a909,
intense: colors$1.neutral.blueGrayLight[1100]
}
},
border: {
positive: {
subtle: colors$1.chromatic.emerald.a100,
intense: colors$1.chromatic.emerald[700]
},
negative: {
subtle: colors$1.chromatic.crimson.a100,
intense: colors$1.chromatic.crimson[700]
},
notice: {
subtle: colors$1.chromatic.cider.a100,
intense: colors$1.chromatic.cider[700]
},
information: {
subtle: colors$1.chromatic.sapphire.a100,
intense: colors$1.chromatic.sapphire[700]
},
neutral: {
subtle: colors$1.neutral.blueGrayLight.a918,
intense: colors$1.neutral.blueGrayLight[900]
}
},
text: {
positive: {
subtle: colors$1.chromatic.emerald[100],
intense: colors$1.chromatic.emerald[700]
},
negative: {
subtle: colors$1.chromatic.crimson[100],
intense: colors$1.chromatic.crimson[600]
},
notice: {
subtle: colors$1.chromatic.cider[100],
intense: colors$1.chromatic.cider[700]
},
information: {
subtle: colors$1.chromatic.sapphire[100],
intense: colors$1.chromatic.sapphire[700]
},
neutral: {
subtle: colors$1.neutral.blueGrayLight[500],
intense: colors$1.neutral.blueGrayLight[1100]
}
},
icon: {
positive: {
subtle: colors$1.chromatic.emerald[100],
intense: colors$1.chromatic.emerald[700]
},
negative: {
subtle: colors$1.chromatic.crimson[100],
intense: colors$1.chromatic.crimson[600]
},
notice: {
subtle: colors$1.chromatic.cider[100],
intense: colors$1.chromatic.cider[700]
},
information: {
subtle: colors$1.chromatic.sapphire[100],
intense: colors$1.chromatic.sapphire[700]
},
neutral: {
subtle: colors$1.neutral.blueGrayLight[500],
intense: colors$1.neutral.blueGrayLight[1100]
}
}
},
interactive: {
background: {
positive: {
"default": colors$1.chromatic.emerald[600],
highlighted: colors$1.chromatic.emerald[700],
disabled: colors$1.chromatic.emerald.a50,
faded: colors$1.chromatic.emerald.a50,
fadedHighlighted: colors$1.chromatic.emerald.a100
},
negative: {
"default": colors$1.chromatic.crimson[600],
highlighted: colors$1.chromatic.crimson[700],
disabled: colors$1.chromatic.crimson.a50,
faded: colors$1.chromatic.crimson.a50,
fadedHighlighted: colors$1.chromatic.crimson.a100
},
notice: {
"default": colors$1.chromatic.cider[600],
highlighted: colors$1.chromatic.cider[700],
disabled: colors$1.chromatic.cider.a50,
faded: colors$1.chromatic.cider.a50,
fadedHighlighted: colors$1.chromatic.cider.a100
},
information: {
"default": colors$1.chromatic.sapphire[600],
highlighted: colors$1.chromatic.sapphire[700],
disabled: colors$1.chromatic.sapphire.a50,
faded: colors$1.chromatic.sapphire.a50,
fadedHighlighted: colors$1.chromatic.sapphire.a100
},
neutral: {
"default": colors$1.neutral.blueGrayLight[1000],
highlighted: colors$1.neutral.blueGrayLight[1100],
disabled: colors$1.neutral.blueGrayLight.a918,
faded: colors$1.neutral.blueGrayLight.a912,
fadedHighlighted: colors$1.neutral.blueGrayLight.a918
},
gray: {
"default": colors$1.neutral.blueGrayLight.a906,
highlighted: colors$1.neutral.blueGrayLight.a912,
disabled: colors$1.neutral.blueGrayLight.a906,
faded: colors$1.neutral.blueGrayLight.a906,
fadedHighlighted: colors$1.neutral.blueGrayLight.a909,
ghost: colors$1.neutral.blueGrayLight.a1
},
primary: {
"default": colors$1.chromatic.azure[500],
highlighted: colors$1.chromatic.azure[600],
disabled: colors$1.chromatic.azure.a100,
faded: colors$1.chromatic.azure.a50,
fadedHighlighted: colors$1.chromatic.azure.a100
},
staticBlack: {
"default": colors$1.neutral.black[500],
highlighted: colors$1.neutral.black[500],
disabled: colors$1.neutral.black[200],
faded: colors$1.neutral.black[50],
fadedHighlighted: colors$1.neutral.black[100],
ghost: colors$1.neutral.black[1]
},
staticWhite: {
"default": colors$1.neutral.white[500],
highlighted: colors$1.neutral.white[400],
disabled: colors$1.neutral.white[50],
faded: colors$1.neutral.white[50],
fadedHighlighted: colors$1.neutral.white[100],
ghost: colors$1.neutral.white[1]
}
},
border: {
positive: {
"default": colors$1.chromatic.emerald[600],
highlighted: colors$1.chromatic.emerald[700],
disabled: colors$1.chromatic.emerald.a100,
faded: colors$1.chromatic.emerald.a100
},
negative: {
"default": colors$1.chromatic.crimson[600],
highlighted: colors$1.chromatic.crimson[700],
disabled: colors$1.chromatic.crimson.a100,
faded: colors$1.chromatic.crimson.a100
},
notice: {
"default": colors$1.chromatic.cider[600],
highlighted: colors$1.chromatic.cider[700],
disabled: colors$1.chromatic.cider.a100,
faded: colors$1.chromatic.cider.a100
},
information: {
"default": colors$1.chromatic.sapphire[600],
highlighted: colors$1.chromatic.sapphire[700],
disabled: colors$1.chromatic.sapphire.a100,
faded: colors$1.chromatic.sapphire.a100
},
neutral: {
"default": colors$1.neutral.blueGrayLight[1200],
highlighted: colors$1.neutral.blueGrayLight[1300],
disabled: colors$1.neutral.blueGrayLight[300],
faded: colors$1.neutral.blueGrayLight.a912
},
gray: {
"default": colors$1.neutral.blueGrayLight[200],
highlighted: colors$1.neutral.blueGrayLight[400],
disabled: colors$1.neutral.blueGrayLight[200],
faded: colors$1.neutral.blueGrayLight.a918
},
primary: {
"default": colors$1.chromatic.azure[500],
highlighted: colors$1.chromatic.azure[600],
disabled: colors$1.chromatic.azure.a100,
faded: colors$1.chromatic.azure.a100
},
staticWhite: {
"default": colors$1.neutral.white[500],
highlighted: colors$1.neutral.white[400],
disabled: colors$1.neutral.white[100],
faded: colors$1.neutral.white[50],
fadedHighlighted: colors$1.neutral.white[100]
},
staticBlack: {
"default": colors$1.neutral.black[500],
highlighted: colors$1.neutral.black[500],
disabled: colors$1.neutral.black[100],
faded: colors$1.neutral.black[100],
fadedHighlighted: colors$1.neutral.black[50]
}
},
text: {
positive: {
normal: colors$1.chromatic.emerald[700],
subtle: colors$1.chromatic.emerald[600],
muted: colors$1.chromatic.emerald[400],
disabled: colors$1.chromatic.emerald.a200
},
negative: {
normal: colors$1.chromatic.crimson[600],
subtle: colors$1.chromatic.crimson[500],
muted: colors$1.chromatic.crimson[400],
disabled: colors$1.chromatic.crimson.a200
},
notice: {
normal: colors$1.chromatic.cider[700],
subtle: colors$1.chromatic.cider[600],
muted: colors$1.chromatic.cider[400],
disabled: colors$1.chromatic.cider.a200
},
information: {
normal: colors$1.chromatic.sapphire[700],
subtle: colors$1.chromatic.sapphire[600],
muted: colors$1.chromatic.sapphire[400],
disabled: colors$1.chromatic.sapphire.a200
},
neutral: {
normal: colors$1.neutral.blueGrayLight[1300],
subtle: colors$1.neutral.blueGrayLight[1100],
muted: colors$1.neutral.blueGrayLight[700],
disabled: colors$1.neutral.blueGrayLight.a932
},
gray: {
normal: colors$1.neutral.blueGrayLight[1300],
subtle: colors$1.neutral.blueGrayLight[1100],
muted: colors$1.neutral.blueGrayLight[700],
disabled: colors$1.neutral.blueGrayLight.a932
},
primary: {
normal: colors$1.chromatic.azure[600],
subtle: colors$1.chromatic.azure[500],
muted: colors$1.chromatic.azure[400],
disabled: colors$1.chromatic.azure.a200
},
onPrimary: {
normal: colors$1.neutral.white[500],
subtle: colors$1.neutral.white[400],
muted: colors$1.neutral.white[300],
disabled: colors$1.neutral.white[100]
},
staticWhite: {
normal: colors$1.neutral.white[500],
subtle: colors$1.neutral.white[400],
muted: colors$1.neutral.white[300],
disabled: colors$1.neutral.white[100]
},
staticBlack: {
normal: colors$1.neutral.black[500],
subtle: colors$1.neutral.black[400],
muted: colors$1.neutral.black[300],
disabled: colors$1.neutral.black[100]
}
},
icon: {
positive: {
normal: colors$1.chromatic.emerald[700],
subtle: colors$1.chromatic.emerald[600],
muted: colors$1.chromatic.emerald[400],
disabled: colors$1.chromatic.emerald.a200
},
negative: {
normal: colors$1.chromatic.crimson[600],
subtle: colors$1.chromatic.crimson[500],
muted: colors$1.chromatic.crimson[400],
disabled: colors$1.chromatic.crimson.a200
},
notice: {
normal: colors$1.chromatic.cider[700],
subtle: colors$1.chromatic.cider[600],
muted: colors$1.chromatic.cider[400],
disabled: colors$1.chromatic.cider.a200
},
information: {
normal: colors$1.chromatic.sapphire[700],
subtle: colors$1.chromatic.sapphire[600],
muted: colors$1.chromatic.sapphire[400],
disabled: colors$1.chromatic.sapphire.a200
},
neutral: {
normal: colors$1.neutral.blueGrayLight[1300],
subtle: colors$1.neutral.blueGrayLight[1100],
muted: colors$1.neutral.blueGrayLight[700],
disabled: colors$1.neutral.blueGrayLight.a932
},
gray: {
normal: colors$1.neutral.blueGrayLight[1300],
subtle: colors$1.neutral.blueGrayLight[1100],
muted: colors$1.neutral.blueGrayLight[700],
disabled: colors$1.neutral.blueGrayLight.a932
},
primary: {
normal: colors$1.chromatic.azure[600],
subtle: colors$1.chromatic.azure[500],
muted: colors$1.chromatic.azure[400],
disabled: colors$1.chromatic.azure.a200
},
onPrimary: {
normal: colors$1.neutral.white[500],
subtle: colors$1.neutral.white[400],
muted: colors$1.neutral.white[300],
disabled: colors$1.neutral.white[100]
},
staticWhite: {
normal: colors$1.neutral.white[500],
subtle: colors$1.neutral.white[400],
muted: colors$1.neutral.white[300],
disabled: colors$1.neutral.white[100]
},
staticBlack: {
normal: colors$1.neutral.black[500],
subtle: colors$1.neutral.black[400],
muted: colors$1.neutral.black[300],
disabled: colors$1.neutral.black[100]
}
}
},
overlay: {
background: {
moderate: colors$1.neutral.blueGrayLight.a918,
subtle: colors$1.neutral.black[200]
}
},
popup: {
background: {
// @deprecated
subtle: colors$1.neutral.blueGrayLight[0],
// @deprecated
intense: colors$1.neutral.blueGrayLight[1000],
gray: {
subtle: colors$1.neutral.blueGrayLight[0],
moderate: colors$1.neutral.blueGrayLight.a48,
intense: colors$1.neutral.black[300]
},
positive: {
moderate: colors$1.chromatic.emerald.a700
},
negative: {
moderate: colors$1.chromatic.crimson.a700
},
notice: {
moderate: colors$1.chromatic.cider.a700
},
information: {
moderate: colors$1.chromatic.sapphire.a700
},
neutral: {
moderate: colors$1.neutral.blueGrayLight.a1288
}
},
border: {
// @deprecated
subtle: colors$1.neutral.blueGrayLight.a100,
// @deprecated
intense: colors$1.neutral.blueGrayLight[900],
gray: {
subtle: colors$1.neutral.blueGrayLight.a909,
moderate: colors$1.neutral.blueGrayLight[100],
intense: colors$1.neutral.blueGrayLight[1000]
},
positive: {
moderate: colors$1.chromatic.emerald[600]
},
negative: {
moderate: colors$1.chromatic.crimson[600]
},
notice: {
moderate: colors$1.chromatic.cider[600]
},
information: {
moderate: colors$1.chromatic.sapphire[600]
},
neutral: {
moderate: colors$1.neutral.blueGrayLight[1100]
}
}
},
data: {
background: {
categorical: {
blue: {
faint: colors$1.chromatic.azure[100],
subtle: colors$1.chromatic.azure[200],
moderate: colors$1.chromatic.azure[300],
intense: colors$1.chromatic.azure[400],
strong: colors$1.chromatic.azure[500]
},
green: {
faint: colors$1.chromatic.emerald[100],
subtle: colors$1.chromatic.emerald[200],
moderate: colors$1.chromatic.emerald[300],
intense: colors$1.chromatic.emerald[400],
strong: colors$1.chromatic.emerald[500]
},
red: {
faint: colors$1.chromatic.crimson[100],
subtle: colors$1.chromatic.crimson[200],
moderate: colors$1.chromatic.crimson[300],
intense: colors$1.chromatic.crimson[400],
strong: colors$1.chromatic.crimson[500]
},
orange: {
faint: colors$1.chromatic.cider[100],
subtle: colors$1.chromatic.cider[200],
moderate: colors$1.chromatic.cider[300],
intense: colors$1.chromatic.cider[400],
strong: colors$1.chromatic.cider[500]
},
skyBlue: {
faint: colors$1.chromatic.sapphire[100],
subtle: colors$1.chromatic.sapphire[200],
moderate: colors$1.chromatic.sapphire[300],
intense: colors$1.chromatic.sapphire[400],
strong: colors$1.chromatic.sapphire[500]
},
purple: {
faint: colors$1.chromatic.orchid[100],
subtle: colors$1.chromatic.orchid[200],
moderate: colors$1.chromatic.orchid[300],
intense: colors$1.chromatic.orchid[400],
strong: colors$1.chromatic.orchid[500]
},
pink: {
faint: colors$1.chromatic.magenta[100],
subtle: colors$1.chromatic.magenta[200],
moderate: colors$1.chromatic.magenta[300],
intense: colors$1.chromatic.magenta[400],
strong: colors$1.chromatic.magenta[500]
},
gold: {
faint: colors$1.chromatic.topaz[50],
subtle: colors$1.chromatic.topaz[100],
moderate: colors$1.chromatic.topaz[200],
intense: colors$1.chromatic.topaz[300],
strong: colors$1.chromatic.topaz[400]
},
gray: {
faint: colors$1.neutral.blueGrayLight[0],
subtle: colors$1.neutral.blueGrayLight[50],
moderate: colors$1.neutral.blueGrayLight[100],
intense: colors$1.neutral.blueGrayLight[400],
strong: colors$1.neutral.blueGrayLight[700]
}
},
sequential: {
blue: {
50: colors$1.chromatic.azure[50],
100: colors$1.chromatic.azure[100],
200: colors$1.chromatic.azure[200],
300: colors$1.chromatic.azure[300],
400: colors$1.chromatic.azure[400],
500: colors$1.chromatic.azure[500],
600: colors$1.chromatic.azure[600],
700: colors$1.chromatic.azure[700],
800: colors$1.chromatic.azure[800],
900: colors$1.chromatic.azure[900],
1000: colors$1.chromatic.azure[1000]
},
green: {
50: colors$1.chromatic.emerald[50],
100: colors$1.chromatic.emerald[100],
200: colors$1.chromatic.emerald[200],
300: colors$1.chromatic.emerald[300],
400: colors$1.chromatic.emerald[400],
500: colors$1.chromatic.emerald[500],
600: colors$1.chromatic.emerald[600],
700: colors$1.chromatic.emerald[700],
800: colors$1.chromatic.emerald[800],
900: colors$1.chromatic.emerald[900],
1000: colors$1.chromatic.emerald[1000]
},
red: {
50: colors$1.chromatic.crimson[50],
100: colors$1.chromatic.crimson[100],
200: colors$1.chromatic.crimson[200],
300: colors$1.chromatic.crimson[300],
400: colors$1.chromatic.crimson[400],
500: colors$1.chromatic.crimson[500],
600: colors$1.chromatic.crimson[600],
700: colors$1.chromatic.crimson[700],
800: colors$1.chromatic.crimson[800],
900: colors$1.chromatic.crimson[900],
1000: colors$1.chromatic.crimson[1000]
},
orange: {
50: colors$1.chromatic.cider[50],
100: colors$1.chromatic.cider[100],
200: colors$1.chromatic.cider[200],
300: colors$1.chromatic.cider[300],
400: colors$1.chromatic.cider[400],
500: colors$1.chromatic.cider[500],
600: colors$1.chromatic.cider[600],
700: colors$1.chromatic.cider[700],
800: colors$1.chromatic.cider[800],
900: colors$1.chromatic.cider[900],
1000: colors$1.chromatic.cider[1000]
},
skyBlue: {
50: colors$1.chromatic.sapphire[50],
100: colors$1.chromatic.sapphire[100],
200: colors$1.chromatic.sapphire[200],
300: colors$1.chromatic.sapphire[300],
400: colors$1.chromatic.sapphire[400],
500: colors$1.chromatic.sapphire[500],
600: colors$1.chromatic.sapphire[600],
700: colors$1.chromatic.sapphire[700],
800: colors$1.chromatic.sapphire[800],
900: colors$1.chromatic.sapphire[900],
1000: colors$1.chromatic.sapphire[1000]
},
purple: {
50: colors$1.chromatic.orchid[50],
100: colors$1.chromatic.orchid[100],
200: colors$1.chromatic.orchid[200],
300: colors$1.chromatic.orchid[300],
400: colors$1.chromatic.orchid[400],
500: colors$1.chromatic.orchid[500],
600: colors$1.chromatic.orchid[600],
700: colors$1.chromatic.orchid[700],
800: colors$1.chromatic.orchid[800],
900: colors$1.chromatic.orchid[900],
1000: colors$1.chromatic.orchid[1000]
},
pink: {
50: colors$1.chromatic.magenta[50],
100: colors$1.chromatic.magenta[100],
200: colors$1.chromatic.magenta[200],
300: colors$1.chromatic.magenta[300],
400: colors$1.chromatic.magenta[400],
500: colors$1.chromatic.magenta[500],
600: colors$1.chromatic.magenta[600],
700: colors$1.chromatic.magenta[700],
800: colors$1.chromatic.magenta[800],
900: colors$1.chromatic.magenta[900],
1000: colors$1.chromatic.magenta[1000]
},
gold: {
50: colors$1.chromatic.topaz[50],
100: colors$1.chromatic.topaz[100],
200: colors$1.chromatic.topaz[200],
300: colors$1.chromatic.topaz[300],
400: colors$1.chromatic.topaz[400],
500: colors$1.chromatic.topaz[500],
600: colors$1.chromatic.topaz[600],
700: colors$1.chromatic.topaz[700],
800: colors$1.chromatic.topaz[800],
900: colors$1.chromatic.topaz[900],
1000: colors$1.chromatic.topaz[1000]
},
gray: {
0: colors$1.neutral.blueGrayLight[0],
50: colors$1.neutral.blueGrayLight[50],
100: colors$1.neutral.blueGrayLight[100],
200: colors$1.neutral.blueGrayLight[200],
300: colors$1.neutral.blueGrayLight[300],
400: colors$1.neutral.blueGrayLight[400],
500: colors$1.neutral.blueGrayLight[500],
600: colors$1.neutral.blueGrayLight[600],
700: colors$1.neutral.blueGrayLight[700],
800: colors$1.neutral.blueGrayLight[800],
900: colors$1.neutral.blueGrayLight[900],
1000: colors$1.neutral.blueGrayLight[1000]
}
}
}
},
transparent: "hsla(0, 0%, 100%, ".concat(opacity[0], ")")
},
onDark: {
surface: {
background: {
gray: {
subtle: colors$1.neutral.blueGrayDark[1300],
moderate: colors$1.neutral.blueGrayDark[1200],
intense: colors$1.neutral.blueGrayDark[1100]
},
primary: {
subtle: colors$1.chromatic.azure.a200,
intense: colors$1.chromatic.azure[500]
},
sea: {
subtle: colors$1.chromatic.sea[900],
intense: colors$1.chromatic.sea[100]
},
cloud: {
subtle: colors$1.chromatic.cloud[900],
intense: colors$1.chromatic.cloud[100]
}
},
border: {
gray: {
normal: colors$1.neutral.blueGrayDark[600],
subtle: colors$1.neutral.blueGrayDark[800],
muted: colors$1.neutral.blueGrayDark.a518
},
primary: {
normal: colors$1.chromatic.azure[500],
muted: colors$1.chromatic.azure.a200
}
},
text: {
gray: {
normal: colors$1.neutral.blueGrayDark[0],
subtle: colors$1.neutral.blueGrayDark[300],
muted: colors$1.neutral.blueGrayDark[500],
disabled: colors$1.neutral.blueGrayDark.a564
},
primary: {
normal: colors$1.chromatic.azure[300]
},
onSea: {
onSubtle: colors$1.chromatic.forest[200],
onIntense: colors$1.chromatic.forest[800]
},
onCloud: {
onSubtle: colors$1.chromatic.azure[200],
onIntense: colors$1.chromatic.azure[600]
},
staticWhite: {
normal: colors$1.neutral.white[500],
subtle: colors$1.neutral.white[450],
muted: colors$1.neutral.white[200],
disabled: colors$1.neutral.white[100]
},
staticBlack: {
normal: colors$1.neutral.black[500],
subtle: colors$1.neutral.black[300],
muted: colors$1.neutral.black[200],
disabled: colors$1.neutral.black[100]
}
},
icon: {
gray: {
normal: colors$1.neutral.blueGrayDark[0],
subtle: colors$1.neutral.blueGrayDark[300],
muted: colors$1.neutral.blueGrayDark[500],
disabled: colors$1.neutral.blueGrayDark.a532
},
primary: {
normal: colors$1.chromatic.azure[300]
},
onSea: {
onSubtle: colors$1.chromatic.forest[400],
onIntense: colors$1.chromatic.forest[600]
},
onCloud: {
onSubtle: colors$1.chromatic.azure[300],
onIntense: colors$1.chromatic.azure[400]
},
staticWhite: {
normal: colors$1.neutral.white[500],
subtle: colors$1.neutral.white[450],
muted: colors$1.neutral.white[200],
disabled: colors$1.neutral.white[100]
},
staticBlack: {
normal: colors$1.neutral.black[500],
subtle: colors$1.neutral.black[300],
muted: colors$1.neutral.black[200],
disabled: colors$1.neutral.black[100]
}
}
},
feedback: {
background: {
positive: {
subtle: colors$1.chromatic.emerald.a100,
intense: colors$1.chromatic.emerald[700]
},
negative: {
subtle: colors$1.chromatic.crimson.a100,
intense: colors$1.chromatic.crimson[700]
},
notice: {
subtle: colors$1.chromatic.cider.a100,
intense: colors$1.chromatic.cider[700]
},
information: {
subtle: colors$1.chromatic.sapphire.a100,
intense: colors$1.chromatic.sapphire[700]
},
neutral: {
subtle: colors$1.neutral.blueGrayDark.a509,
intense: colors$1.neutral.blueGrayDark[800]
}
},
border: {
positive: {
subtle: colors$1.chromatic.emerald.a200,
intense: colors$1.chromatic.emerald[800]
},
negative: {
subtle: colors$1.chromatic.crimson.a200,
intense: colors$1.chromatic.crimson[800]
},
notice: {
subtle: colors$1.chromatic.cider.a200,
intense: colors$1.chromatic.cider[800]
},
information: {
subtle: colors$1.chromatic.sapphire.a200,
intense: colors$1.chromatic.sapphire[800]
},
neutral: {
subtle: colors$1.neutral.blueGrayDark.a518,
intense: colors$1.neutral.blueGrayDark[800]
}
},
text: {
positive: {
subtle: colors$1.chromatic.emerald[50],
intense: colors$1.chromatic.emerald[400]
},
negative: {
subtle: colors$1.chromatic.crimson[50],
intense: colors$1.chromatic.crimson[400]
},
notice: {
subtle: colors$1.chromatic.cider[50],
intense: colors$1.chromatic.cider[400]
},
information: {
subtle: colors$1.chromatic.sapphire[50],
intense: colors$1.chromatic.sapphire[400]
},
neutral: {
subtle: colors$1.neutral.blueGrayDark[500],
intense: colors$1.neutral.blueGrayDark[300]
}
},
icon: {
positive: {
subtle: colors$1.chromatic.emerald[50],
intense: colors$1.chromatic.emerald[400]
},
negative: {
subtle: colors$1.chromatic.crimson[50],
intense: colors$1.chromatic.crimson[400]
},
notice: {
subtle: colors$1.chromatic.cider[50],
intense: colors$1.chromatic.cider[400]
},
information: {
subtle: colors$1.chromatic.sapphire[50],
intense: colors$1.chromatic.sapphire[400]
},
neutral: {
subtle: colors$1.neutral.blueGrayDark[500],
intense: colors$1.neutral.blueGrayDark[300]
}
}
},
interactive: {
background: {
positive: {
"default": colors$1.chromatic.emerald[600],
highlighted: colors$1.chromatic.emerald[700],
disabled: colors$1.chromatic.emerald.a100,
faded: colors$1.chromatic.emerald.a150,
fadedHighlighted: colors$1.chromatic.emerald.a200
},
negative: {
"default": colors$1.chromatic.crimson[600],
highlighted: colors$1.chromatic.crimson[700],
disabled: colors$1.chromatic.crimson.a100,
faded: colors$1.chromatic.crimson.a150,
fadedHighlighted: colors$1.chromatic.crimson.a200
},
notice: {
"default": colors$1.chromatic.cider[600],
highlighted: colors$1.chromatic.cider[700],
disabled: colors$1.chromatic.cider.a100,
faded: colors$1.chromatic.cider.a150,
fadedHighlighted: colors$1.chromatic.cider.a200
},
information: {
"default": colors$1.chromatic.sapphire[600],
highlighted: colors$1.chromatic.sapphire[700],
disabled: colors$1.chromatic.sapphire.a100,
faded: colors$1.chromatic.sapphire.a150,
fadedHighlighted: colors$1.chromatic.sapphire.a200
},
neutral: {
"default": colors$1.neutral.blueGrayDark[50],
highlighted: colors$1.neutral.blueGrayDark[200],
disabled: colors$1.neutral.blueGrayDark.a518,
faded: colors$1.neutral.blueGrayDark.a512,
fadedHighlighted: colors$1.neutral.blueGrayDark.a518
},
gray: {
"default": colors$1.neutral.blueGrayDark.a512,
highlighted: colors$1.neutral.blueGrayDark.a532,
disabled: colors$1.neutral.blueGrayDark.a509,
faded: colors$1.neutral.blueGrayDark.a509,
fadedHighlighted: colors$1.neutral.blueGrayDark.a518,
ghost: colors$1.neutral.blueGrayDark.a1388
},
primary: {
"default": colors$1.chromatic.azure[400],
highlighted: colors$1.chromatic.azure[500],
disabled: colors$1.chromatic.azure.a150,
faded: colors$1.chromatic.azure.a150,
fadedHighlighted: colors$1.chromatic.azure.a200
},
staticBlack: {
"default": colors$1.neutral.black[500],
highlighted: colors$1.neutral.black[500],
disabled: colors$1.neutral.black[200],
faded: colors$1.neutral.black[50],
fadedHighlighted: colors$1.neutral.black[100],
ghost: colors$1.neutral.black[1]
},
staticWhite: {
"default": colors$1.neutral.white[500],
highlighted: colors$1.neutral.white[400],
disabled: colors$1.neutral.white[50],
faded: colors$1.neutral.white[50],
fadedHighlighted: colors$1.neutral.white[100],
ghost: colors$1.neutral.white[1]
}
},
border: {
positive: {
"default": colors$1.chromatic.emerald[600],
highlighted: colors$1.chromatic.emerald[700],
disabled: colors$1.chromatic.emerald.a100,
faded: colors$1.chromatic.emerald.a100
},
negative: {
"default": colors$1.chromatic.crimson[600],
highlighted: colors$1.chromatic.crimson[700],
disabled: colors$1.chromatic.crimson.a100,
faded: colors$1.chromatic.crimson.a100
},
notice: {
"default": colors$1.chromatic.cider[600],
highlighted: colors$1.chromatic.cider[700],
disabled: colors$1.chromatic.cider.a100,
faded: colors$1.chromatic.cider.a100
},
information: {
"default": colors$1.chromatic.sapphire[600],
highlighted: colors$1.chromatic.sapphire[700],
disabled: colors$1.chromatic.sapphire.a100,
faded: colors$1.chromatic.sapphire.a100
},
neutral: {
"default": colors$1.neutral.blueGrayDark[100],
highlighted: colors$1.neutral.blueGrayDark[0],
disabled: colors$1.neutral.blueGrayDark[800],
faded: colors$1.neutral.blueGrayDark.a518
},
gray: {
"default": colors$1.neutral.blueGrayDark[800],
highlighted: colors$1.neutral.blueGrayDark[700],
disabled: colors$1.neutral.blueGrayDark[1000],
faded: colors$1.neutral.blueGrayDark.a518
},
primary: {
"default": colors$1.chromatic.azure[400],
highlighted: colors$1.chromatic.azure[600],
disabled: colors$1.chromatic.azure.a200,
faded: colors$1.chromatic.azure.a150
},
staticWhite: {
"default": colors$1.neutral.white[500],
highlighted: colors$1.neutral.white[400],
disabled: colors$1.neutral.white[100],
faded: colors$1.neutral.white[50],
fadedHighlighted: colors$1.neutral.white[100]
},
staticBlack: {
"default": colors$1.neutral.black[500],
highlighted: colors$1.neutral.black[500],
disabled: colors$1.neutral.black[100],
faded: colors$1.neutral.black[100],
fadedHighlighted: colors$1.neutral.black[50]
}
},
text: {
positive: {
normal: colors$1.chromatic.emerald[400],
subtle: colors$1.chromatic.emerald[500],
muted: colors$1.chromatic.emerald[700],
disabled: colors$1.chromatic.emerald.a200
},
negative: {
normal: colors$1.chromatic.crimson[400],
subtle: colors$1.chromatic.crimson[500],
muted: colors$1.chromatic.crimson[700],
disabled: colors$1.chromatic.crimson.a200
},
notice: {
normal: colors$1.chromatic.cider[400],
subtle: colors$1.chromatic.cider[500],
muted: colors$1.chromatic.cider[700],
disabled: colors$1.chromatic.cider.a200
},
information: {
normal: colors$1.chromatic.sapphire[400],
subtle: colors$1.chromatic.sapphire[500],
muted: colors$1.chromatic.sapphire[700],
disabled: colors$1.chromatic.sapphire.a200
},
neutral: {
normal: colors$1.neutral.blueGrayDark[0],
subtle: colors$1.neutral.blueGrayDark[300],
muted: colors$1.neutral.blueGrayDark[500],
disabled: colors$1.neutral.blueGrayDark.a532
},
gray: {
normal: colors$1.neutral.blueGrayDark[0],
subtle: colors$1.neutral.blueGrayDark[300],
muted: colors$1.neutral.blueGrayDark[500],
disabled: colors$1.neutral.blueGrayDark.a532
},
primary: {
normal: colors$1.chromatic.azure[300],
subtle: colors$1.chromatic.azure[400],
muted: colors$1.chromatic.azure[600],
disabled: colors$1.chromatic.azure.a400
},
onPrimary: {
normal: colors$1.neutral.white[500],
subtle: colors$1.neutral.white[400],
muted: colors$1.neutral.white[300],
disabled: colors$1.neutral.white[100]
},
staticWhite: {
normal: colors$1.neutral.white[500],
subtle: colors$1.neutral.white[400],
muted: colors$1.neutral.white[300],
disabled: colors$1.neutral.white[100]
},
staticBlack: {
normal: colors$1.neutral.black[500],
subtle: colors$1.neutral.black[400],
muted: colors$1.neutral.black[300],
disabled: colors$1.neutral.black[100]
}
},
icon: {
positive: {
normal: colors$1.chromatic.emerald[400],
subtle: colors$1.chromatic.emerald[500],
muted: colors$1.chromatic.emerald[700],
disabled: colors$1.chromatic.emerald.a200
},
negative: {
normal: colors$1.chromatic.crimson[400],
subtle: colors$1.chromatic.crimson[500],
muted: colors$1.chromatic.crimson[700],
disabled: colors$1.chromatic.crimson.a200
},
notice: {
normal: colors$1.chromatic.cider[400],
subtle: colors$1.chromatic.cider[500],
muted: colors$1.chromatic.cider[700],
disabled: colors$1.chromatic.cider.a200
},
information: {
normal: colors$1.chromatic.sapphire[400],
subtle: colors$1.chromatic.sapphire[500],
muted: colors$1.chromatic.sapphire[700],
disabled: colors$1.chromatic.sapphire.a200
},
neutral: {
normal: colors$1.neutral.blueGrayDark[0],
subtle: colors$1.neutral.blueGrayDark[300],
muted: colors$1.neutral.blueGrayDark[500],
disabled: colors$1.neutral.blueGrayDark.a532
},
gray: {
normal: colors$1.neutral.blueGrayDark[0],
subtle: colors$1.neutral.blueGrayDark[300],
muted: colors$1.neutral.blueGrayDark[500],
disabled: colors$1.neutral.blueGrayDark.a532
},
primary: {
normal: colors$1.chromatic.azure[300],
subtle: colors$1.chromatic.azure[400],
muted: colors$1.chromatic.azure[600],
disabled: colors$1.chromatic.azure.a400
},
onPrimary: {
normal: colors$1.neutral.white[500],
subtle: colors$1.neutral.white[400],
muted: colors$1.neutral.white[300],
disabled: colors$1.neutral.white[100]
},
staticWhite: {
normal: colors$1.neutral.white[500],
subtle: colors$1.neutral.white[400],
muted: colors$1.neutral.white[300],
disabled: colors$1.neutral.white[100]
},
staticBlack: {
normal: colors$1.neutral.black[500],
subtle: colors$1.neutral.black[400],
muted: colors$1.neutral.black[300],
disabled: colors$1.neutral.black[100]
}
}
},
overlay: {
background: {
moderate: colors$1.neutral.blueGrayDark.a518,
subtle: colors$1.neutral.black[400]
}
},
popup: {
background: {
// @deprecated
subtle: colors$1.neutral.blueGrayDark[1000],
// @deprecated
intense: colors$1.neutral.blueGrayDark[700],
gray: {
subtle: colors$1.neutral.blueGrayDark[1300],
moderate: colors$1.neutral.blueGrayDark.a1188,
intense: colors$1.neutral.black[300]
},
positive: {
moderate: colors$1.chromatic.emerald.a700
},
negative: {
moderate: colors$1.chromatic.crimson.a700
},
notice: {
moderate: colors$1.chromatic.cider.a700
},
information: {
moderate: colors$1.chromatic.sapphire.a700
},
neutral: {
moderate: colors$1.neutral.blueGrayDark.a888
}
},
border: {
// @deprecated
subtle: colors$1.neutral.blueGrayDark.a100,
// @deprecated
intense: colors$1.neutral.blueGrayDark.a100,
gray: {
subtle: colors$1.neutral.blueGrayDark.a512,
moderate: colors$1.neutral.blueGrayDark[800],
intense: colors$1.neutral.blueGrayDark[1000]
},
positive: {
moderate: colors$1.chromatic.emerald[600]
},
negative: {
moderate: colors$1.chromatic.crimson[600]
},
notice: {
moderate: colors$1.chromatic.cider[600]
},
information: {
moderate: colors$1.chromatic.sapphire[600]
},
neutral: {
moderate: colors$1.neutral.blueGrayDark[800]
}
}
},
data: {
background: {
categorical: {
blue: {
faint: colors$1.chromatic.azure[800],
subtle: colors$1.chromatic.azure[700],
moderate: colors$1.chromatic.azure[600],
intense: colors$1.chromatic.azure[500],
strong: colors$1.chromatic.azure[400]
},
green: {
faint: colors$1.chromatic.emerald[800],
subtle: colors$1.chromatic.emerald[700],
moderate: colors$1.chromatic.emerald[600],
intense: colors$1.chromatic.emerald[500],
strong: colors$1.chromatic.emerald[400]
},
red: {
faint: colors$1.chromatic.crimson[800],
subtle: colors$1.chromatic.crimson[700],
moderate: colors$1.chromatic.crimson[600],
intense: colors$1.chromatic.crimson[500],
strong: colors$1.chromatic.crimson[400]
},
orange: {
faint: colors$1.chromatic.cider[800],
subtle: colors$1.chromatic.cider[700],
moderate: colors$1.chromatic.cider[600],
intense: colors$1.chromatic.cider[500],
strong: colors$1.chromatic.cider[400]
},
skyBlue: {
faint: colors$1.chromatic.sapphire[800],
subtle: colors$1.chromatic.sapphire[700],
moderate: colors$1.chromatic.sapphire[600],
intense: colors$1.chromatic.sapphire[500],
strong: colors$1.chromatic.sapphire[400]
},
purple: {
faint: colors$1.chromatic.orchid[800],
subtle: colors$1.chromatic.orchid[700],
moderate: colors$1.chromatic.orchid[600],
intense: colors$1.chromatic.orchid[500],
strong: colors$1.chromatic.orchid[400]
},
pink: {
faint: colors$1.chromatic.magenta[800],
subtle: colors$1.chromatic.magenta[700],
moderate: colors$1.chromatic.magenta[600],
intense: colors$1.chromatic.magenta[500],
strong: colors$1.chromatic.magenta[400]
},
gold: {
faint: colors$1.chromatic.topaz[700],
subtle: colors$1.chromatic.topaz[600],
moderate: colors$1.chromatic.topaz[500],
intense: colors$1.chromatic.topaz[400],
strong: colors$1.chromatic.topaz[300]
},
gray: {
faint: colors$1.neutral.blueGrayDark[1200],
subtle: colors$1.neutral.blueGrayDark[1000],
moderate: colors$1.neutral.blueGrayDark[900],
intense: colors$1.neutral.blueGrayDark[300],
strong: colors$1.neutral.blueGrayDark[600]
}
},
sequential: {
blue: {
50: colors$1.chromatic.azure[1000],
100: colors$1.chromatic.azure[900],
200: colors$1.chromatic.azure[800],
300: colors$1.chromatic.azure[700],
400: colors$1.chromatic.azure[600],
500: colors$1.chromatic.azure[500],
600: colors$1.chromatic.azure[400],
700: colors$1.chromatic.azure[300],
800: colors$1.chromatic.azure[200],
900: colors$1.chromatic.azure[100],
1000: colors$1.chromatic.azure[50]
},
green: {
50: colors$1.chromatic.emerald[1000],
100: colors$1.chromatic.emerald[900],
200: colors$1.chromatic.emerald[800],
300: colors$1.chromatic.emerald[700],
400: colors$1.chromatic.emerald[600],
500: colors$1.chromatic.emerald[500],
600: colors$1.chromatic.emerald[400],
700: colors$1.chromatic.emerald[300],
800: colors$1.chromatic.emerald[200],
900: colors$1.chromatic.emerald[100],
1000: colors$1.chromatic.emerald[50]
},
red: {
50: colors$1.chromatic.crimson[1000],
100: colors$1.chromatic.crimson[900],
200: colors$1.chromatic.crimson[800],
300: colors$1.chromatic.crimson[700],
400: colors$1.chromatic.crimson[600],
500: colors$1.chromatic.crimson[500],
600: colors$1.chromatic.crimson[400],
700: colors$1.chromatic.crimson[300],
800: colors$1.chromatic.crimson[200],
900: colors$1.chromatic.crimson[100],
1000: colors$1.chromatic.crimson[50]
},
orange: {
50: colors$1.chromatic.cider[1000],
100: colors$1.chromatic.cider[900],
200: colors$1.chromatic.cider[800],
300: colors$1.chromatic.cider[700],
400: colors$1.chromatic.cider[600],
500: colors$1.chromatic.cider[500],
600: colors$1.chromatic.cider[400],
700: colors$1.chromatic.cider[300],
800: colors$1.chromatic.cider[200],
900: colors$1.chromatic.cider[100],
1000: colors$1.chromatic.cider[50]
},
skyBlue: {
50: colors$1.chromatic.sapphire[1000],
100: colors$1.chromatic.sapphire[900],
200: colors$1.chromatic.sapphire[800],
300: colors$1.chromatic.sapphire[700],
400: colors$1.chromatic.sapphire[600],
500: colors$1.chromatic.sapphire[500],
600: colors$1.chromatic.sapphire[400],
700: colors$1.chromatic.sapphire[300],
800: colors$1.chromatic.sapphire[200],
900: colors$1.chromatic.sapphire[100],
1000: colors$1.chromatic.sapphire[50]
},
purple: {
50: colors$1.chromatic.orchid[1000],
100: colors$1.chromatic.orchid[900],
200: colors$1.chromatic.orchid[800],
300: colors$1.chromatic.orchid[700],
400: colors$1.chromatic.orchid[600],
500: colors$1.chromatic.orchid[500],
600: colors$1.chromatic.orchid[400],
700: colors$1.chromatic.orchid[300],
800: colors$1.chromatic.orchid[200],
900: colors$1.chromatic.orchid[100],
1000: colors$1.chromatic.orchid[50]
},
pink: {
50: colors$1.chromatic.magenta[1000],
100: colors$1.chromatic.magenta[900],
200: colors$1.chromatic.magenta[800],
300: color