@granto-umbrella/umbrella-components 3.0.32 → 3.0.33

package/src/styles/tokens/colors.ts

@@ -1,296 +1,296 @@
-export const primitiveColors = {
-  base: {
-    white: '#ffffff',
-    black: '#000000',
-  },
-  gray: {
-    100: '#f7f7f7',
-    200: '#f0f0f0',
-    300: '#e3e3e3',
-    400: '#cfcfcf',
-    500: '#b7b7b7',
-    600: '#9b9b9b',
-    700: '#7f7f7f',
-    800: '#606060',
-    900: '#464646',
-    1000: '#333333',
-    1100: '#1d1d1d',
-    1200: '#0f0f0f',
-    1300: '#070707',
-  },
-  purple: {
-    100: '#cdb7f4',
-    200: '#b899ee',
-    300: '#a37ce8',
-    400: '#8e5fe0',
-    500: '#7943d9',
-    600: '#662ccb',
-    700: '#5828ac',
-    800: '#492290',
-    900: '#3b1c73',
-    1000: '#2c1557',
-    1100: '#1e0f3b',
-    1200: '#100820',
-    1300: '#020104',
-  },
-  green: {
-    100: '#bef4b7',
-    200: '#a3ee99',
-    300: '#88e87c',
-    400: '#6de05f',
-    500: '#53d943',
-    600: '#3dcb2c',
-    700: '#35ac28',
-    800: '#2b9022',
-    900: '#21731c',
-    1000: '#185715',
-    1100: '#103b0f',
-    1200: '#082008',
-    1300: '#010401',
-  },
-  red: {
-    100: '#f4b7b8',
-    200: '#ee999a',
-    300: '#e87c7d',
-    400: '#e05f60',
-    500: '#d94344',
-    600: '#cb2c2d',
-    700: '#ac2828',
-    800: '#902222',
-    900: '#731c1c',
-    1000: '#571515',
-    1100: '#3b0f0f',
-    1200: '#200808',
-    1300: '#040101',
-  },
-  blue: {
-    100: '#b7c1f4',
-    200: '#99a7ee',
-    300: '#7c8de8',
-    400: '#5f73e0',
-    500: '#435ad9',
-    600: '#2c45cb',
-    700: '#283cac',
-    800: '#223690',
-    900: '#1c2e73',
-    1000: '#152557',
-    1100: '#0f1b3b',
-    1200: '#080f20',
-    1300: '#010204',
-  },
-  orange: {
-    100: '#f4d1b7',
-    200: '#eebd99',
-    300: '#e8aa7c',
-    400: '#e0975f',
-    500: '#d98343',
-    600: '#cb712c',
-    700: '#ac6128',
-    800: '#904f22',
-    900: '#733f1c',
-    1000: '#572e15',
-    1100: '#3b1f0f',
-    1200: '#201008',
-    1300: '#040201',
-  },
-  yellow: {
-    100: '#f4f3b7',
-    200: '#eeed99',
-    300: '#e8e67c',
-    400: '#e0df5f',
-    500: '#d9d843',
-    600: '#cbcb2c',
-    700: '#acac28',
-    800: '#909022',
-    900: '#73731c',
-    1000: '#575715',
-    1100: '#3b3b0f',
-    1200: '#202008',
-    1300: '#040401',
-  },
-};
-
-export const semanticColors = {
-  base: {
-    background: primitiveColors.base.white,
-    text: primitiveColors.base.black,
-  },
-  neutral: {
-    100: primitiveColors.gray[100],
-    200: primitiveColors.gray[200],
-    300: primitiveColors.gray[300],
-    400: primitiveColors.gray[400],
-    500: primitiveColors.gray[500],
-    600: primitiveColors.gray[600],
-    700: primitiveColors.gray[700],
-  },
-  branding: {
-    surface: {
-      disabled: primitiveColors.purple[100],
-      enabled: primitiveColors.purple[700],
-      hover: primitiveColors.purple[800],
-      pressed: primitiveColors.purple[1000],
-    },
-    border: {
-      disabled: primitiveColors.purple[100],
-      enabled: primitiveColors.purple[700],
-      hover: primitiveColors.purple[800],
-      pressed: primitiveColors.purple[1000],
-    },
-    text: {
-      accent: {
-        disabled: primitiveColors.purple[100],
-        enabled: primitiveColors.purple[700],
-        hover: primitiveColors.purple[800],
-        pressed: primitiveColors.purple[1000],
-      },
-      onSurfaceAccent: {
-        enabled: primitiveColors.base.white,
-      },
-    },
-  },
-  success: {
-    surface: {
-      feedback: primitiveColors.green[100],
-    },
-    text: {
-      feedback: {
-        strong: primitiveColors.green[1100],
-        accent: primitiveColors.green[700],
-      },
-    },
-  },
-  danger: {
-    surface: {
-      enabled: primitiveColors.red[600],
-      hover: primitiveColors.red[700],
-      pressed: primitiveColors.red[900],
-      disabled: primitiveColors.red[100],
-    },
-    text: {
-      enabled: primitiveColors.red[600],
-      hover: primitiveColors.red[700],
-      pressed: primitiveColors.red[900],
-      disabled: primitiveColors.red[100],
-      onSurface: primitiveColors.base.white,
-      feedback: {
-        strong: primitiveColors.red[1100],
-        accent: primitiveColors.red[700],
-      },
-    },
-    border: {
-      enabled: primitiveColors.red[600],
-      hover: primitiveColors.red[700],
-      pressed: primitiveColors.red[900],
-      disabled: primitiveColors.red[100],
-    },
-  },
-  warning: {
-    surface: {
-      feedback: primitiveColors.yellow[100],
-      pills: {
-        supply: primitiveColors.orange[200],
-      },
-    },
-    text: {
-      feedback: {
-        strong: primitiveColors.yellow[1100],
-      },
-      pills: {
-        supply: primitiveColors.orange[1000],
-      },
-    },
-  },
-  border: {
-    feedback: primitiveColors.yellow[900],
-  },
-  info: {
-    surface: {
-      feedback: primitiveColors.blue[100],
-      pills: {
-        tradicional: primitiveColors.blue[100],
-      },
-    },
-    text: {
-      feedback: {
-        strong: primitiveColors.blue[1100],
-      },
-      pills: {
-        tradicional: primitiveColors.blue[1000],
-      },
-    },
-    border: {
-      feedback: primitiveColors.blue[900],
-    },
-  },
-  global: {
-    foreground: {
-      default: primitiveColors.gray[100],
-    },
-
-    surface: {
-      default: primitiveColors.base.white,
-      overlay: 'rgba(0, 0, 0, 0.5)',
-      disabled: primitiveColors.gray[200],
-      danger: {
-        enabled: primitiveColors.red[600],
-        hover: primitiveColors.red[700],
-        pressed: primitiveColors.red[900],
-        disabled: primitiveColors.red[100],
-      },
-      status: {
-        online: primitiveColors.green[600],
-        notification: primitiveColors.red[600],
-        offline: primitiveColors.gray[600],
-      },
-    },
-
-    status: {
-      online: primitiveColors.green[600],
-      notification: primitiveColors.red[600],
-      offline: primitiveColors.gray[600],
-    },
-    text: {
-      default: {
-        enabled: primitiveColors.base.black,
-      },
-      onSurface: {
-        subtitle: primitiveColors.gray[500],
-        enabled: primitiveColors.gray[800],
-      },
-      subtitle: {
-        enabled: primitiveColors.gray[700],
-      },
-      feedback: {
-        error: primitiveColors.red[100],
-        info: primitiveColors.blue[100],
-        success: primitiveColors.green[100],
-        warning: primitiveColors.yellow[100],
-        strong: {
-          error: primitiveColors.red[1100],
-          info: primitiveColors.blue[1100],
-          success: primitiveColors.green[1100],
-          warning: primitiveColors.yellow[1100],
-        },
-      },
-    },
-    border: {
-      default: primitiveColors.gray[200],
-      medium: primitiveColors.gray[400],
-      strong: primitiveColors.gray[700],
-      disabled: primitiveColors.gray[300],
-      feedback: {
-        error: primitiveColors.red[900],
-        info: primitiveColors.blue[900],
-        success: primitiveColors.green[900],
-        warning: primitiveColors.yellow[900],
-      },
-      danger: {
-        enabled: primitiveColors.red[600],
-        hover: primitiveColors.red[700],
-        pressed: primitiveColors.red[900],
-        disabled: primitiveColors.red[100],
-      },
-    },
-  },
-};
+export const primitiveColors = {
+  base: {
+    white: '#ffffff',
+    black: '#000000',
+  },
+  gray: {
+    100: '#f7f7f7',
+    200: '#f0f0f0',
+    300: '#e3e3e3',
+    400: '#cfcfcf',
+    500: '#b7b7b7',
+    600: '#9b9b9b',
+    700: '#7f7f7f',
+    800: '#606060',
+    900: '#464646',
+    1000: '#333333',
+    1100: '#1d1d1d',
+    1200: '#0f0f0f',
+    1300: '#070707',
+  },
+  purple: {
+    100: '#cdb7f4',
+    200: '#b899ee',
+    300: '#a37ce8',
+    400: '#8e5fe0',
+    500: '#7943d9',
+    600: '#662ccb',
+    700: '#5828ac',
+    800: '#492290',
+    900: '#3b1c73',
+    1000: '#2c1557',
+    1100: '#1e0f3b',
+    1200: '#100820',
+    1300: '#020104',
+  },
+  green: {
+    100: '#bef4b7',
+    200: '#a3ee99',
+    300: '#88e87c',
+    400: '#6de05f',
+    500: '#53d943',
+    600: '#3dcb2c',
+    700: '#35ac28',
+    800: '#2b9022',
+    900: '#21731c',
+    1000: '#185715',
+    1100: '#103b0f',
+    1200: '#082008',
+    1300: '#010401',
+  },
+  red: {
+    100: '#f4b7b8',
+    200: '#ee999a',
+    300: '#e87c7d',
+    400: '#e05f60',
+    500: '#d94344',
+    600: '#cb2c2d',
+    700: '#ac2828',
+    800: '#902222',
+    900: '#731c1c',
+    1000: '#571515',
+    1100: '#3b0f0f',
+    1200: '#200808',
+    1300: '#040101',
+  },
+  blue: {
+    100: '#b7c1f4',
+    200: '#99a7ee',
+    300: '#7c8de8',
+    400: '#5f73e0',
+    500: '#435ad9',
+    600: '#2c45cb',
+    700: '#283cac',
+    800: '#223690',
+    900: '#1c2e73',
+    1000: '#152557',
+    1100: '#0f1b3b',
+    1200: '#080f20',
+    1300: '#010204',
+  },
+  orange: {
+    100: '#f4d1b7',
+    200: '#eebd99',
+    300: '#e8aa7c',
+    400: '#e0975f',
+    500: '#d98343',
+    600: '#cb712c',
+    700: '#ac6128',
+    800: '#904f22',
+    900: '#733f1c',
+    1000: '#572e15',
+    1100: '#3b1f0f',
+    1200: '#201008',
+    1300: '#040201',
+  },
+  yellow: {
+    100: '#f4f3b7',
+    200: '#eeed99',
+    300: '#e8e67c',
+    400: '#e0df5f',
+    500: '#d9d843',
+    600: '#cbcb2c',
+    700: '#acac28',
+    800: '#909022',
+    900: '#73731c',
+    1000: '#575715',
+    1100: '#3b3b0f',
+    1200: '#202008',
+    1300: '#040401',
+  },
+};
+
+export const semanticColors = {
+  base: {
+    background: primitiveColors.base.white,
+    text: primitiveColors.base.black,
+  },
+  neutral: {
+    100: primitiveColors.gray[100],
+    200: primitiveColors.gray[200],
+    300: primitiveColors.gray[300],
+    400: primitiveColors.gray[400],
+    500: primitiveColors.gray[500],
+    600: primitiveColors.gray[600],
+    700: primitiveColors.gray[700],
+  },
+  branding: {
+    surface: {
+      disabled: primitiveColors.purple[100],
+      enabled: primitiveColors.purple[700],
+      hover: primitiveColors.purple[800],
+      pressed: primitiveColors.purple[1000],
+    },
+    border: {
+      disabled: primitiveColors.purple[100],
+      enabled: primitiveColors.purple[700],
+      hover: primitiveColors.purple[800],
+      pressed: primitiveColors.purple[1000],
+    },
+    text: {
+      accent: {
+        disabled: primitiveColors.purple[100],
+        enabled: primitiveColors.purple[700],
+        hover: primitiveColors.purple[800],
+        pressed: primitiveColors.purple[1000],
+      },
+      onSurfaceAccent: {
+        enabled: primitiveColors.base.white,
+      },
+    },
+  },
+  success: {
+    surface: {
+      feedback: primitiveColors.green[100],
+    },
+    text: {
+      feedback: {
+        strong: primitiveColors.green[1100],
+        accent: primitiveColors.green[700],
+      },
+    },
+  },
+  danger: {
+    surface: {
+      enabled: primitiveColors.red[600],
+      hover: primitiveColors.red[700],
+      pressed: primitiveColors.red[900],
+      disabled: primitiveColors.red[100],
+    },
+    text: {
+      enabled: primitiveColors.red[600],
+      hover: primitiveColors.red[700],
+      pressed: primitiveColors.red[900],
+      disabled: primitiveColors.red[100],
+      onSurface: primitiveColors.base.white,
+      feedback: {
+        strong: primitiveColors.red[1100],
+        accent: primitiveColors.red[700],
+      },
+    },
+    border: {
+      enabled: primitiveColors.red[600],
+      hover: primitiveColors.red[700],
+      pressed: primitiveColors.red[900],
+      disabled: primitiveColors.red[100],
+    },
+  },
+  warning: {
+    surface: {
+      feedback: primitiveColors.yellow[100],
+      pills: {
+        supply: primitiveColors.orange[200],
+      },
+    },
+    text: {
+      feedback: {
+        strong: primitiveColors.yellow[1100],
+      },
+      pills: {
+        supply: primitiveColors.orange[1000],
+      },
+    },
+  },
+  border: {
+    feedback: primitiveColors.yellow[900],
+  },
+  info: {
+    surface: {
+      feedback: primitiveColors.blue[100],
+      pills: {
+        tradicional: primitiveColors.blue[100],
+      },
+    },
+    text: {
+      feedback: {
+        strong: primitiveColors.blue[1100],
+      },
+      pills: {
+        tradicional: primitiveColors.blue[1000],
+      },
+    },
+    border: {
+      feedback: primitiveColors.blue[900],
+    },
+  },
+  global: {
+    foreground: {
+      default: primitiveColors.gray[100],
+    },
+
+    surface: {
+      default: primitiveColors.base.white,
+      overlay: 'rgba(0, 0, 0, 0.5)',
+      disabled: primitiveColors.gray[200],
+      danger: {
+        enabled: primitiveColors.red[600],
+        hover: primitiveColors.red[700],
+        pressed: primitiveColors.red[900],
+        disabled: primitiveColors.red[100],
+      },
+      status: {
+        online: primitiveColors.green[600],
+        notification: primitiveColors.red[600],
+        offline: primitiveColors.gray[600],
+      },
+    },
+
+    status: {
+      online: primitiveColors.green[600],
+      notification: primitiveColors.red[600],
+      offline: primitiveColors.gray[600],
+    },
+    text: {
+      default: {
+        enabled: primitiveColors.base.black,
+      },
+      onSurface: {
+        subtitle: primitiveColors.gray[500],
+        enabled: primitiveColors.gray[800],
+      },
+      subtitle: {
+        enabled: primitiveColors.gray[700],
+      },
+      feedback: {
+        error: primitiveColors.red[100],
+        info: primitiveColors.blue[100],
+        success: primitiveColors.green[100],
+        warning: primitiveColors.yellow[100],
+        strong: {
+          error: primitiveColors.red[1100],
+          info: primitiveColors.blue[1100],
+          success: primitiveColors.green[1100],
+          warning: primitiveColors.yellow[1100],
+        },
+      },
+    },
+    border: {
+      default: primitiveColors.gray[200],
+      medium: primitiveColors.gray[400],
+      strong: primitiveColors.gray[700],
+      disabled: primitiveColors.gray[300],
+      feedback: {
+        error: primitiveColors.red[900],
+        info: primitiveColors.blue[900],
+        success: primitiveColors.green[900],
+        warning: primitiveColors.yellow[900],
+      },
+      danger: {
+        enabled: primitiveColors.red[600],
+        hover: primitiveColors.red[700],
+        pressed: primitiveColors.red[900],
+        disabled: primitiveColors.red[100],
+      },
+    },
+  },
+};