@granto-umbrella/umbrella-components 2.3.22 → 3.0.0

package/src/styles/tokens/colors.ts

@@ -1,112 +1,112 @@
 export const primitiveColors = {
   base: {
-    white: "#ffffff",
-    black: "#000000",
+    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",
+    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",
+    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",
+    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",
+    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",
+    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",
+    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",
+    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',
   },
 };
 
@@ -132,17 +132,17 @@ export const semanticColors = {
       pressed: primitiveColors.purple[1000],
     },
     border: {
+      disabled: primitiveColors.purple[100],
       enabled: primitiveColors.purple[700],
       hover: primitiveColors.purple[800],
       pressed: primitiveColors.purple[1000],
-      disabled: primitiveColors.purple[100],
     },
     text: {
       accent: {
+        disabled: primitiveColors.purple[100],
         enabled: primitiveColors.purple[700],
         hover: primitiveColors.purple[800],
         pressed: primitiveColors.purple[1000],
-        disabled: primitiveColors.purple[100],
       },
       onSurfaceAccent: {
         enabled: primitiveColors.base.white,
@@ -230,7 +230,7 @@ export const semanticColors = {
 
     surface: {
       default: primitiveColors.base.white,
-      overlay: "rgba(0, 0, 0, 0.5)",
+      overlay: 'rgba(0, 0, 0, 0.5)',
       disabled: primitiveColors.gray[200],
       danger: {
         enabled: primitiveColors.red[600],
@@ -238,6 +238,11 @@ export const semanticColors = {
         pressed: primitiveColors.red[900],
         disabled: primitiveColors.red[100],
       },
+      status: {
+        online: primitiveColors.green[600],
+        notification: primitiveColors.red[600],
+        offline: primitiveColors.gray[600],
+      },
     },
 
     status: {
@@ -273,6 +278,7 @@ export const semanticColors = {
       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],

package/src/styles/tokens/shadows.ts

@@ -6,9 +6,9 @@ export const primitiveShadows = {
     danger: `0px 0px 0px 2px ${semanticColors.danger.border.enabled}`,
     none: "none",
     default:
-      "0px 44px 12px 0px rgba(158, 158, 158, 0.00), 0px 28px 11px 0px rgba(158, 158, 158, 0.01), 0px 16px 9px 0px rgba(158, 158, 158, 0.03), 0px 7px 7px 0px rgba(158, 158, 158, 0.04), 0px 2px 4px 0px rgba(158, 158, 158, 0.05)",
-    md: "0px 47px 13px 0px rgba(158, 158, 158, 0.00), 0px 30px 12px 0px rgba(158, 158, 158, 0.03), 0px 17px 10px 0px rgba(158, 158, 158, 0.10), 0px 8px 8px 0px rgba(158, 158, 158, 0.17), 0px 2px 4px 0px rgba(158, 158, 158, 0.20)",
-    lg: "24px 26px 10px 0px rgba(214, 214, 214, 0.00), 15px 17px 9px 0px rgba(214, 214, 214, 0.03), 9px 10px 8px 0px rgba(214, 214, 214, 0.10), 4px 4px 6px 0px rgba(214, 214, 214, 0.17), 1px 1px 3px 0px rgba(214, 214, 214, 0.20)",
+      "0px 2px 4px rgba(158, 158, 158, 0.05), 0px 7px 7px rgba(158, 158, 158, 0.04), 0px 16px 9px rgba(158, 158, 158, 0.03), 0px 28px 11px rgba(158, 158, 158, 0.01), 0px 44px 12px rgba(158, 158, 158, 0)",
+    md: "0px 2px 4px rgba(158, 158, 158, 0.2), 0px 8px 8px rgba(158, 158, 158, 0.17), 0px 17px 10px rgba(158, 158, 158, 0.1), 0px 30px 12px rgba(158, 158, 158, 0.03), 0px 47px 13px rgba(158, 158, 158, 0)",
+    lg: "1px 1px 3px rgba(214, 214, 214, 0.2), 4px 4px 6px rgba(214, 214, 214, 0.17), 9px 10px 8px rgba(214, 214, 214, 0.1), 15px 17px 9px rgba(214, 214, 214, 0.03), 24px 26px 10px rgba(214, 214, 214, 0)",
   },
 };
 

package/src/styles/tokens/sizes.ts

@@ -18,6 +18,8 @@ export const primitiveSizes = {
     x14: "3.5rem", // 56px
     x15: "3.75rem", // 60px
     x16: "4rem", // 64px
+    x28: "6.9375rem", //111px
+    x44: "10.9375rem", //175px
   },
 };
 
@@ -31,6 +33,11 @@ export const semanticSizes = {
       xl: primitiveSizes.size.x6, // 24px
       "2xl": primitiveSizes.size.x8, // 32px
       "3xl": primitiveSizes.size.x10, // 40px
+      "4xl": primitiveSizes.size.x12, // 48px
+      "5xl": primitiveSizes.size.x14, // 56px
+      "6xl": primitiveSizes.size.x16, // 64px
+
+      
     },
     padding: {
       "2xs": primitiveSizes.size.half, // 2px
@@ -42,6 +49,10 @@ export const semanticSizes = {
       "2xl": primitiveSizes.size.x6, // 24px
       "3xl": primitiveSizes.size.x8, // 32px
       "4xl": primitiveSizes.size.x16, // 64px
+      "5xl": primitiveSizes.size.x28, // 111px
+      "6xl": primitiveSizes.size.x44, // 175px 
+
+
     },
     spacings: {
       sm: primitiveSizes.size.x6, // 24px
@@ -50,4 +61,4 @@ export const semanticSizes = {
     },
     full: "100%",
   },
-};
+}as const;

package/src/styles/tokens/typography.ts

@@ -3,134 +3,159 @@ export const typographyTokens = {
     base: "'Mulish', sans-serif",
   },
   fontSizes: {
-    displayXL: "48px",
-    displayL: "36px",
-    displayM: "32px",
-    headingL: "28px",
-    headingM: "24px",
-    headingS: "20px",
-    bodyL: "18px",
-    bodyM: "16px",
-    bodyS: "14px",
-    labelL: "18px",
-    labelM: "16px",
-    labelS: "14px",
-    captionM: "12px",
-    captionS: "10px",
+    displayXL: '36px',
+    displayL: '32px',
+    displayM: '24px',
+    headingL: '20px',
+    headingM: '18px',
+    headingS: '16px',
+    bodyL: '20px',
+    bodyM: '18px',
+    bodyS: '16px',
+    bodyXS: '14px',
+    labelL: '18px',
+    labelM: '16px',
+    labelS: '14px',
+    captionM: '12px',
+    captionS: '10px',
   },
   lineHeights: {
-    displayXL: "56px",
-    displayL: "44px",
-    displayM: "40px",
-    headingL: "34px",
-    headingM: "28px",
-    headingS: "26px",
-    bodyL: "24px",
-    bodyM: "22px",
-    bodyS: "20px",
-    labelL: "24px",
-    labelM: "22px",
-    labelS: "20px",
-    captionM: "16px",
-    captionS: "14px",
+    displayXL: '44px',
+    displayL: '38px',
+    displayM: '28px',
+    headingL: '26px',
+    headingM: '24px',
+    headingS: '22px',
+    bodyL: '26px',
+    bodyM: '24px',
+    bodyS: '22px',
+    bodyXS: '18.2px',
+    labelL: '24px',
+    labelM: '22px',
+    labelS: '18px',
+    captionM: '16px',
+    captionS: '14px',
   },
   fontWeights: {
-    bold: "700",
-    semibold: "600",
-    medium: "500",
-    regular: "400",
+    bold: '700',
+    semibold: '600',
+    medium: '500',
+    regular: '400',
   },
   letterSpacing: {
-    displayXL: "-4%",
-    displayL: "-3%",
-    displayM: "-2%",
-    headingL: "-1%",
-    default: "0%",
-  },
-  textStyles: {
-    displayXL: {
-      fontSize: "48px",
-      lineHeight: "56px",
-      fontWeight: "700", // Bold
-      letterSpacing: "-4%",
-    },
-    displayL: {
-      fontSize: "36px",
-      lineHeight: "44px",
-      fontWeight: "600", // Semibold
-      letterSpacing: "-3%",
-    },
-    displayM: {
-      fontSize: "32px",
-      lineHeight: "40px",
-      fontWeight: "600", // Semibold
-      letterSpacing: "-2%",
-    },
-    headingL: {
-      fontSize: "28px",
-      lineHeight: "34px",
-      fontWeight: "600", // Semibold
-      letterSpacing: "-1%",
-    },
-    headingM: {
-      fontSize: "24px",
-      lineHeight: "28px",
-      fontWeight: "500", // Medium
-      letterSpacing: "0%",
-    },
-    headingS: {
-      fontSize: "20px",
-      lineHeight: "26px",
-      fontWeight: "500", // Medium
-      letterSpacing: "0%",
-    },
-    bodyL: {
-      fontSize: "18px",
-      lineHeight: "24px",
-      fontWeight: "400", // Regular
-      letterSpacing: "0%",
-    },
-    bodyM: {
-      fontSize: "16px",
-      lineHeight: "22px",
-      fontWeight: "400", // Regular
-      letterSpacing: "0%",
-    },
-    bodyS: {
-      fontSize: "14px",
-      lineHeight: "20px",
-      fontWeight: "400", // Regular
-      letterSpacing: "0%",
-    },
-    labelL: {
-      fontSize: "18px",
-      lineHeight: "24px",
-      fontWeight: "600", // Semibold
-      letterSpacing: "0%",
-    },
-    labelM: {
-      fontSize: "16px",
-      lineHeight: "22px",
-      fontWeight: "500", // Medium
-      letterSpacing: "0%",
-    },
-    labelS: {
-      fontSize: "14px",
-      lineHeight: "20px",
-      fontWeight: "500", // Medium
-      letterSpacing: "0%",
-    },
-    captionM: {
-      fontSize: "12px",
-      lineHeight: "16px",
-      fontWeight: "500", // Medium
-      letterSpacing: "0%",
-    },
-    captionS: {
-      fontSize: "10px",
-      lineHeight: "14px",
-      fontWeight: "500", // Medium
-      letterSpacing: "0%",
-    },
+    displayXL: '-3%',
+    displayL: '-2%',
+    default: '0%',
+  },
+};
+
+export const textStyles = {
+  displayXL: {
+    fontSize: typographyTokens.fontSizes.displayXL,
+    lineHeight: typographyTokens.lineHeights.displayXL,
+    fontWeight: typographyTokens.fontWeights.semibold,
+    letterSpacing: typographyTokens.letterSpacing.displayXL,
+  },
+  displayL: {
+    fontSize: typographyTokens.fontSizes.displayL,
+    lineHeight: typographyTokens.lineHeights.displayL,
+    fontWeight: typographyTokens.fontWeights.semibold,
+    letterSpacing: typographyTokens.letterSpacing.displayL,
+  },
+  displayM: {
+    fontSize: typographyTokens.fontSizes.displayM,
+    lineHeight: typographyTokens.lineHeights.displayM,
+    fontWeight: typographyTokens.fontWeights.medium,
+    letterSpacing: typographyTokens.letterSpacing.default,
+  },
+  headingL: {
+    fontSize: typographyTokens.fontSizes.headingL,
+    lineHeight: typographyTokens.lineHeights.headingL,
+    fontWeight: typographyTokens.fontWeights.medium,
+    letterSpacing: typographyTokens.letterSpacing.default,
+  },
+  headingM: {
+    fontSize: typographyTokens.fontSizes.headingM,
+    lineHeight: typographyTokens.lineHeights.headingM,
+    fontWeight: typographyTokens.fontWeights.medium,
+    letterSpacing: typographyTokens.letterSpacing.default,
+  },
+  headingS: {
+    fontSize: typographyTokens.fontSizes.headingS,
+    lineHeight: typographyTokens.lineHeights.headingS,
+    fontWeight: typographyTokens.fontWeights.medium,
+    letterSpacing: typographyTokens.letterSpacing.default,
+  },
+  bodyL: {
+    fontSize: typographyTokens.fontSizes.bodyL,
+    lineHeight: typographyTokens.lineHeights.bodyL,
+    fontWeight: typographyTokens.fontWeights.medium,
+    letterSpacing: typographyTokens.letterSpacing.default,
+  },
+  bodyM: {
+    fontSize: typographyTokens.fontSizes.bodyM,
+    lineHeight: typographyTokens.lineHeights.bodyM,
+    fontWeight: typographyTokens.fontWeights.medium,
+    letterSpacing: typographyTokens.letterSpacing.default,
+  },
+  bodyS: {
+    fontSize: typographyTokens.fontSizes.bodyS,
+    lineHeight: typographyTokens.lineHeights.bodyS,
+    fontWeight: typographyTokens.fontWeights.medium,
+    letterSpacing: typographyTokens.letterSpacing.default,
+  },
+  bodyS_semibold: {
+    fontSize: typographyTokens.fontSizes.bodyS,
+    lineHeight: typographyTokens.lineHeights.bodyS,
+    fontWeight: typographyTokens.fontWeights.semibold,
+    letterSpacing: typographyTokens.letterSpacing.default,
+  },
+  bodyXS: {
+    fontSize: typographyTokens.fontSizes.bodyXS,
+    lineHeight: typographyTokens.lineHeights.bodyXS,
+    fontWeight: typographyTokens.fontWeights.medium,
+    letterSpacing: typographyTokens.letterSpacing.default,
+  },
+  bodyXS_semibold: {
+    fontSize: typographyTokens.fontSizes.bodyXS,
+    lineHeight: typographyTokens.lineHeights.bodyXS,
+    fontWeight: typographyTokens.fontWeights.semibold,
+    letterSpacing: typographyTokens.letterSpacing.default,
+  },
+  labelL: {
+    fontSize: typographyTokens.fontSizes.labelL,
+    lineHeight: typographyTokens.lineHeights.labelL,
+    fontWeight: typographyTokens.fontWeights.semibold,
+    letterSpacing: typographyTokens.letterSpacing.default,
+  },
+  labelM_regular: {
+    fontSize: typographyTokens.fontSizes.labelM,
+    lineHeight: typographyTokens.lineHeights.labelM,
+    fontWeight: typographyTokens.fontWeights.regular,
+    letterSpacing: typographyTokens.letterSpacing.default,
+  },
+  labelM_medium: {
+    fontSize: typographyTokens.fontSizes.labelM,
+    lineHeight: typographyTokens.lineHeights.labelM,
+    fontWeight: typographyTokens.fontWeights.medium,
+    letterSpacing: typographyTokens.letterSpacing.default,
+  },
+  labelS: {
+    fontSize: typographyTokens.fontSizes.labelS,
+    lineHeight: typographyTokens.lineHeights.labelS,
+    fontWeight: typographyTokens.fontWeights.medium,
+    letterSpacing: typographyTokens.letterSpacing.default,
+  },
+  captionM: {
+    fontSize: typographyTokens.fontSizes.captionM,
+    lineHeight: typographyTokens.lineHeights.captionM,
+    fontWeight: typographyTokens.fontWeights.medium,
+    letterSpacing: typographyTokens.letterSpacing.default,
+  },
+  captionS: {
+    fontSize: typographyTokens.fontSizes.captionS,
+    lineHeight: typographyTokens.lineHeights.captionS,
+    fontWeight: typographyTokens.fontWeights.medium,
+    letterSpacing: typographyTokens.letterSpacing.default,
   },
 };