@razorpay/blade
Version:
The Design System that powers Razorpay
926 lines (923 loc) • 32.7 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 { 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[400],
subtle: colors$1.neutral.blueGrayLight[300],
muted: colors$1.neutral.blueGrayLight.a100
},
primary: {
normal: colors$1.chromatic.azure[500],
muted: colors$1.chromatic.azure.a100
}
},
text: {
gray: {
normal: colors$1.neutral.blueGrayLight[1200],
subtle: colors$1.neutral.blueGrayLight[900],
muted: colors$1.neutral.blueGrayLight[600],
disabled: colors$1.neutral.blueGrayLight.a200
},
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[1200],
subtle: colors$1.neutral.blueGrayLight[900],
muted: colors$1.neutral.blueGrayLight[600],
disabled: colors$1.neutral.blueGrayLight.a200
},
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.a50,
intense: colors$1.neutral.blueGrayLight[1000]
}
},
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.a100,
intense: colors$1.neutral.blueGrayLight[1100]
}
},
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.a100,
faded: colors$1.neutral.blueGrayLight.a100,
fadedHighlighted: colors$1.neutral.blueGrayLight.a200
},
gray: {
"default": colors$1.neutral.blueGrayLight.a75,
highlighted: colors$1.neutral.blueGrayLight.a100,
disabled: colors$1.neutral.blueGrayLight.a100,
faded: colors$1.neutral.blueGrayLight.a25,
fadedHighlighted: colors$1.neutral.blueGrayLight.a75
},
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]
},
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]
}
},
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[700],
highlighted: colors$1.neutral.blueGrayLight[700],
disabled: colors$1.neutral.blueGrayLight[300],
faded: colors$1.neutral.blueGrayLight.a100
},
gray: {
"default": colors$1.neutral.blueGrayLight[300],
highlighted: colors$1.neutral.blueGrayLight[300],
disabled: colors$1.neutral.blueGrayLight[200],
faded: colors$1.neutral.blueGrayLight.a100
},
primary: {
"default": colors$1.chromatic.azure[500],
highlighted: colors$1.chromatic.azure[500],
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]
},
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]
}
},
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[1100],
subtle: colors$1.neutral.blueGrayLight[900],
muted: colors$1.neutral.blueGrayLight[600],
disabled: colors$1.neutral.blueGrayLight.a200
},
gray: {
normal: colors$1.neutral.blueGrayLight[1200],
subtle: colors$1.neutral.blueGrayLight[900],
muted: colors$1.neutral.blueGrayLight[600],
disabled: colors$1.neutral.blueGrayLight.a200
},
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[1100],
subtle: colors$1.neutral.blueGrayLight[900],
muted: colors$1.neutral.blueGrayLight[600],
disabled: colors$1.neutral.blueGrayLight.a200
},
gray: {
normal: colors$1.neutral.blueGrayLight[1200],
subtle: colors$1.neutral.blueGrayLight[900],
muted: colors$1.neutral.blueGrayLight[600],
disabled: colors$1.neutral.blueGrayLight.a200
},
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.a200,
subtle: colors$1.neutral.black[200]
}
},
popup: {
background: {
subtle: colors$1.neutral.blueGrayLight[0],
intense: colors$1.neutral.blueGrayLight[1000]
},
border: {
subtle: colors$1.neutral.blueGrayLight.a100,
intense: colors$1.neutral.blueGrayLight[900]
}
},
transparent: "hsla(0, 0%, 100%, ".concat(opacity[0], ")")
},
onDark: {
surface: {
background: {
gray: {
subtle: colors$1.neutral.blueGrayDark[1300],
moderate: colors$1.neutral.blueGrayDark[1100],
intense: colors$1.neutral.blueGrayDark[1000]
},
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.a100
},
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[50],
muted: colors$1.neutral.blueGrayDark[300],
disabled: colors$1.neutral.blueGrayDark.a200
},
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[50],
muted: colors$1.neutral.blueGrayDark[300],
disabled: colors$1.neutral.blueGrayDark.a200
},
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.a100,
intense: colors$1.neutral.blueGrayDark[900]
}
},
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.a100,
intense: colors$1.neutral.blueGrayDark[900]
}
},
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[400],
intense: colors$1.neutral.blueGrayDark[50]
}
},
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[700],
intense: colors$1.neutral.blueGrayDark[50]
}
}
},
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.a100,
faded: colors$1.neutral.blueGrayDark.a75,
fadedHighlighted: colors$1.neutral.blueGrayDark.a100
},
gray: {
"default": colors$1.neutral.blueGrayDark.a75,
highlighted: colors$1.neutral.blueGrayDark.a100,
disabled: colors$1.neutral.blueGrayDark.a100,
faded: colors$1.neutral.blueGrayDark.a25,
fadedHighlighted: colors$1.neutral.blueGrayDark.a75
},
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]
},
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]
}
},
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[200],
highlighted: colors$1.neutral.blueGrayDark[200],
disabled: colors$1.neutral.blueGrayDark[800],
faded: colors$1.neutral.blueGrayDark.a100
},
gray: {
"default": colors$1.neutral.blueGrayDark[600],
highlighted: colors$1.neutral.blueGrayDark[600],
disabled: colors$1.neutral.blueGrayDark[700],
faded: colors$1.neutral.blueGrayDark.a100
},
primary: {
"default": colors$1.chromatic.azure[400],
highlighted: colors$1.chromatic.azure[500],
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]
},
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]
}
},
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[50],
subtle: colors$1.neutral.blueGrayDark[300],
muted: colors$1.neutral.blueGrayDark[600],
disabled: colors$1.neutral.blueGrayDark.a200
},
gray: {
normal: colors$1.neutral.blueGrayDark[0],
subtle: colors$1.neutral.blueGrayDark[50],
muted: colors$1.neutral.blueGrayDark[300],
disabled: colors$1.neutral.blueGrayDark.a200
},
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[50],
subtle: colors$1.neutral.blueGrayDark[300],
muted: colors$1.neutral.blueGrayDark[600],
disabled: colors$1.neutral.blueGrayDark.a200
},
gray: {
normal: colors$1.neutral.blueGrayDark[0],
subtle: colors$1.neutral.blueGrayDark[50],
muted: colors$1.neutral.blueGrayDark[300],
disabled: colors$1.neutral.blueGrayDark.a200
},
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.a200,
subtle: colors$1.neutral.black[400]
}
},
popup: {
background: {
subtle: colors$1.neutral.blueGrayDark[1000],
intense: colors$1.neutral.blueGrayDark[700]
},
border: {
subtle: colors$1.neutral.blueGrayDark.a100,
intense: colors$1.neutral.blueGrayDark.a100
}
},
transparent: "hsla(217, 27%, 15%, ".concat(opacity[0], ")")
}
};
var bladeTheme = {
name: 'bladeTheme',
border: border,
breakpoints: breakpoints,
colors: colors,
motion: motion,
spacing: spacing,
elevation: elevation,
typography: typography
};
export { bladeTheme as default };
//# sourceMappingURL=bladeTheme.js.map