Multi-Brand Tokens & Styles (React)

borders.ts

@@ -0,0 +1,7 @@
+
+import { Colors } from './colors';
+import { Measures } from './measures';
+
+
+export const Borders = {
+}

colors.ts

@@ -0,0 +1,186 @@
+const primary100 = "#f1effe";
+const primary200 = "#bdb7ff";
+const primary300 = "#948aff";
+const primary400 = "#6a5cff";
+const primary500 = "#402eff";
+const primary600 = "#1500f7";
+const primary700 = "#0f00b8";
+const primary800 = "#0e00a5";
+const primary900 = "#0b007d";
+const primary1000 = "#070054";
+const statesInformative100 = "#f1effe";
+const statesInformative200 = "#bdb7ff";
+const statesInformative300 = "#1500f7";
+const statesSuccess100 = "#e5fff8";
+const statesSuccess200 = "#9ee4ce";
+const statesSuccess300 = "#37c99b";
+const statesWarning100 = "#ffe8e0";
+const statesWarning200 = "#ffc5b1";
+const statesWarning300 = "#fc6533";
+const statesDanger100 = "#fceaea";
+const statesDanger200 = "#f4b9b9";
+const statesDanger300 = "#da1414";
+const neutralWhite = "#ffffff";
+const neutral100 = "#f9f9f9";
+const neutral200 = "#f5f5f5";
+const neutral300 = "#e2e2e2";
+const neutral400 = "#cbcbcb";
+const neutral500 = "#b5b5b5";
+const neutral600 = "#9e9e9e";
+const neutral700 = "#878787";
+const neutral800 = "#6e6e71";
+const neutral900 = "#57575a";
+const neutral1000 = "#404043";
+const neutralBlack = "#141416";
+const secondaryAgrume100 = "#fffbfa";
+const secondaryAgrume200 = "#fff3ef";
+const secondaryAgrume300 = "#ffeae3";
+const secondaryAgrume400 = "#ffd9cc";
+const secondaryAgrume500 = "#ffbfaa";
+const secondaryAgrume600 = "#ffa587";
+const secondaryAgrume700 = "#ff8b64";
+const secondaryAgrume800 = "#fc6533";
+const secondaryPaleyellow100 = "#fffcf6";
+const secondaryPaleyellow200 = "#fff4dc";
+const secondaryPaleyellow300 = "#ffecc2";
+const secondaryPaleyellow400 = "#ffe3a7";
+const secondaryPaleyellow500 = "#ffdb8d";
+const secondaryPaleyellow600 = "#ffd373";
+const secondaryPaleyellow700 = "#ffc850";
+const secondaryPaleyellow800 = "#ffae00";
+const secondaryWatergreen100 = "#f8fdfb";
+const secondaryWatergreen200 = "#e1f7f0";
+const secondaryWatergreen300 = "#cbf1e5";
+const secondaryWatergreen400 = "#b4ebd9";
+const secondaryWatergreen500 = "#9ee4ce";
+const secondaryWatergreen600 = "#88dec3";
+const secondaryWatergreen700 = "#6ad6b4";
+const secondaryWatergreen800 = "#37c99b";
+const extraPurple100 = "#f3daff";
+const extraPurple200 = "#e372ff";
+const extraPurple300 = "#ad00ff";
+const extraBrown100 = "#f4e6d5";
+const extraBrown200 = "#ffba69";
+const extraBrown300 = "#aa5c00";
+const extraPink100 = "#ffd7ec";
+const extraPink200 = "#ff7dc3";
+const extraPink300 = "#da2185";
+const extraFrog100 = "#b4efba";
+const extraFrog200 = "#69ff78";
+const extraFrog300 = "#00ac11";
+const colorSurfaceColorSurface = neutral100;
+const colorBackgroundColorBackgroundBrandStandard = primary800;
+const colorBackgroundColorBackgroundWhite = neutralWhite;
+const colorBackgroundStateDangerColorBackgroundDangerStandard = statesDanger300;
+const colorBackgroundStateDangerColorBackgroundDangerWeak = statesDanger100;
+const colorBorderNeutralColorBorderNeutralDefault = neutral400;
+const colorBorderNeutralColorBorderNeutralHover = neutral600;
+const colorBorderNeutralColorBorderNeutralDisabled = neutral200;
+const colorBorderStateDangerColorBorderDanger = statesDanger300;
+const colorTextNeutralOnLightColorTextNeutralStrong = neutralBlack;
+const colorTextNeutralOnLightColorTextNeutralStandard = neutral900;
+const colorTextNeutralOnLightColorTextNeutralWeak = neutral700;
+const colorTextStateDangerColorTextDangerStandard = statesDanger300;
+const colorTextStateDangerColorTextDangerWeak = statesDanger200;
+const colorTextNeutralOnDarkColorTextInverseStrong = neutralWhite;
+const colorTextNeutralOnDarkColorTextInverseStandard = neutral100;
+
+export const Colors = {
+    primary100,
+    primary200,
+    primary300,
+    primary400,
+    primary500,
+    primary600,
+    primary700,
+    primary800,
+    primary900,
+    primary1000,
+    statesInformative100,
+    statesInformative200,
+    statesInformative300,
+    statesSuccess100,
+    statesSuccess200,
+    statesSuccess300,
+    statesWarning100,
+    statesWarning200,
+    statesWarning300,
+    statesDanger100,
+    statesDanger200,
+    statesDanger300,
+    neutralWhite,
+    neutral100,
+    neutral200,
+    neutral300,
+    neutral400,
+    neutral500,
+    neutral600,
+    neutral700,
+    neutral800,
+    neutral900,
+    neutral1000,
+    neutralBlack,
+    secondaryAgrume100,
+    secondaryAgrume200,
+    secondaryAgrume300,
+    secondaryAgrume400,
+    secondaryAgrume500,
+    secondaryAgrume600,
+    secondaryAgrume700,
+    secondaryAgrume800,
+    secondaryPaleyellow100,
+    secondaryPaleyellow200,
+    secondaryPaleyellow300,
+    secondaryPaleyellow400,
+    secondaryPaleyellow500,
+    secondaryPaleyellow600,
+    secondaryPaleyellow700,
+    secondaryPaleyellow800,
+    secondaryWatergreen100,
+    secondaryWatergreen200,
+    secondaryWatergreen300,
+    secondaryWatergreen400,
+    secondaryWatergreen500,
+    secondaryWatergreen600,
+    secondaryWatergreen700,
+    secondaryWatergreen800,
+    extraPurple100,
+    extraPurple200,
+    extraPurple300,
+    extraBrown100,
+    extraBrown200,
+    extraBrown300,
+    extraPink100,
+    extraPink200,
+    extraPink300,
+    extraFrog100,
+    extraFrog200,
+    extraFrog300,
+  /** Use for surface */
+    colorSurfaceColorSurface,
+  /** Primary color background */
+    colorBackgroundColorBackgroundBrandStandard,
+  /** White color background */
+    colorBackgroundColorBackgroundWhite,
+    colorBackgroundStateDangerColorBackgroundDangerStandard,
+    colorBackgroundStateDangerColorBackgroundDangerWeak,
+  /** Use to visually group or separate UI elements, such as flat cards or side panel dividers. */
+    colorBorderNeutralColorBorderNeutralDefault,
+  /** Use for neutral borders on hover (such as flat cards) */
+    colorBorderNeutralColorBorderNeutralHover,
+  /** Use for disabled element borders */
+    colorBorderNeutralColorBorderNeutralDisabled,
+    colorBorderStateDangerColorBorderDanger,
+  /** Use for: - Item titles - Headers, subhheaders - Input fields text - Letters in password */
+    colorTextNeutralOnLightColorTextNeutralStrong,
+  /** Use for: - Paragraph text - Secondary text */
+    colorTextNeutralOnLightColorTextNeutralStandard,
+  /** Use for: - Tertiary text - Input labels - Placeholder text - Image captions */
+    colorTextNeutralOnLightColorTextNeutralWeak,
+    colorTextStateDangerColorTextDangerStandard,
+    colorTextStateDangerColorTextDangerWeak,
+  /** Use for catchy text on colored backgrounds */
+    colorTextNeutralOnDarkColorTextInverseStrong,
+  /** Use for: - Secondary text - Legal text - Help text  on colored backgrounds */
+    colorTextNeutralOnDarkColorTextInverseStandard,
+}

gradients.ts

@@ -0,0 +1,8 @@
+
+import { Colors } from './colors';
+import { Measures } from './measures';
+
+
+
+export const Gradients = {
+}