@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
49 lines • 2.28 kB
CSS
/*
* Badge theme
*
*/
/*
* WIP: Figma design tokens for the badge component
*
* Exactly how design tokens from figma will be integrated is still not decided. So this file
* is just a temporary solution that separates design tokens from the rest of the styles.
* These colors should eventually end up being properly defined design variables.
*
* Pending design pattern:
* - Point the figma variable to existing css variables from `properties.scss` where possible.
* - Name the variable with a `--figma-` prefix followed by kebab case figma token name.
* - E.g. "Color/Stroke/Neutral-Bold` -> "--figma-color-stroke-neutral-bold"
* - Using dashes in figma "folders" might be an issue i.e. "Neutral-Bold" above.
* - Perhaps we should also use underscores, or camel case?
* - "--figma-color-stroke-neutral_bold"
* - "--figma_color_stroke_neutral-bold"
* - "--figma-color-stroke-neutralBold"
* - Name the figma primitive used by the token in a comment.
*/
/*
* Badge design tokens
*
* These are the figma design variables used by the "information" variant of the badge component.
* The naming, prefix, location, and anything else is subject to change.
*/
.dnb-badge {
--figma-color-decorative-first-subtle: var(--color-mint-green);
--figma-color-decorative-first-muted: #d8f3ec;
--figma-color-background-neutral-bold: var(--color-black-20);
--figma-color-background-neutral-subtle: var(--color-black-3);
--figma-color-stroke-neutral-bold: var(--color-black-20);
--figma-color-text-neutral: var(--color-black-80);
--figma-color-text-neutral-inverse: var(--color-white);
--figma-color-background-positive: var(--color-success-green);
--figma-color-text-positive: var(--color-success-green);
--figma-color-background-positive-subtle: #ebf4f2;
--figma-color-stroke-positive: var(--color-success-green);
--figma-color-background-warning: var(--color-accent-yellow);
--figma-color-text-warning-bold: #805b0e;
--figma-color-background-warning-subtle: var(--color-sand-yellow);
--figma-color-stroke-warning: var(--color-accent-yellow);
--figma-color-background-error: #d52525;
--figma-color-text-destructive: #d52525;
--figma-color-background-error-subtle: #fceeee;
--figma-color-stroke-error: #d52525;
}