@teammodlr/ui-kit 2.0.20 → 2.0.22

package/src/styles/theme.css.ts

@@ -1,170 +1,170 @@
-import {createGlobalTheme, globalStyle, styleVariants} from '@vanilla-extract/css';
-import {fonts} from "./typography.css";
-
-export const spaceScale = {
-    '0': '0px',
-    '0.5': '2px',
-    '1': '4px',
-    '1.5': '6px',
-    '2': '8px',
-    '2.5': '10px',
-    '3': '12px',
-    '3.5': '14px',
-    '4': '16px',
-    '5': '18px',
-};
-
-export const marginVariants = styleVariants(spaceScale, (space) => ({
-    margin: space
-}));
-
-export const borderRadiusScale = {
-    'none': '0px',
-    'xsmall': '1px',
-    'small': '2px',
-    'default': '4px',
-    'medium': '6px',
-    'large': '8px',
-    'xlarge': '12px',
-    'full': '9999px',
-};
-
-export const borderRadiusVariants = styleVariants(borderRadiusScale, (borderRadius) => ({
-    borderRadius: borderRadius
-}));
-
-export const fontSizeScale = {
-    'base': '14px',
-    'xsmall': '10px',
-    'small': '12px',
-    'large': '16px',
-    'xlarge': '18px',
-    'xxlarge': '20px',
-};
-
-export const fontSizeVariants = styleVariants(fontSizeScale, (fontSize) => ({
-    fontSize: fontSize
-}));
-
-export const shadows = {
-    'sm': '0px 3px 6px 1px rgb(154 161 171 / 15%)',
-    'md': '0px 4px 10px 1px rgb(154 161 171 / 20%)',
-    'lg': '0px 7px 14px 1px rgb(154 161 171 / 23%)'
-}
-
-export const shadowVariants = styleVariants(shadows, (shadow) => ({
-    boxShadow: shadow
-}));
-
-export const transitions = {
-    'default': 'cubic-bezier(0.4, 0, 0.2, 1)',
-}
-
-export const transitionsVariants = styleVariants(transitions, (transition) => ({
-    transition: transition
-}));
-
-export const themeVars = createGlobalTheme(':root', {
-    color: {
-        font: {
-            default: '#1F2328',
-            muted: '#656d76',
-            subtle: '#6e7781',
-            text: '#24292f'
-        },
-        gray: {
-            50: 'hsl(0,0%,98%)',
-            100: '#f6f8fa',
-            150: '#f2f3f5',
-            200: '#eaeef2',
-            250: '#f3f4f6',
-            300: '#d0d7de',
-            400: '#afb8c1',
-            500: '#8c959f',
-            600: '#6e7781',
-            700: '#57606a',
-            800: '#424a53',
-            900: '#32383f',
-        },
-        blue: {
-            50: 'hsl(214,100%,96.9%)',
-            100: 'hsl(214,94.6%,92.7%)',
-            200: 'hsl(213,96.9%,87.3%)',
-            300: 'hsl(212,96.4%,78.4%)',
-            400: 'hsl(213,93.9%,67.8%)',
-            500: 'hsl(217,91.2%,59.8%)',
-            600: 'hsl(221,83.2%,53.3%)',
-            700: 'hsl(224,76.3%,48%)',
-            800: 'hsl(226,70.7%,40.2%)',
-            900: 'hsl(224,64.3%,32.9%)',
-        },
-        amber: {
-            50: 'hsl(48,100%,96.1%)',
-            100: 'hsl(48,96.5%,88.8%)',
-            200: 'hsl(48,96.6%,76.7%)',
-            300: 'hsl(46,96.7%,64.5%)',
-            400: 'hsl(43,96.4%,56.3%)',
-            500: 'hsl(38,92.1%,50.2%)',
-            600: 'hsl(32,94.6%,43.7%)',
-            700: 'hsl(26,90.5%,37.1%)',
-            800: 'hsl(23,82.5%,31.4%)',
-            900: 'hsl(22,77.8%,26.5%)',
-        },
-        red: {
-            50: 'hsl(0,85.7%,97.3%)',
-            100: 'hsl(0,93.3%,94.1%)',
-            200: 'hsl(0,96.3%,89.4%)',
-            300: 'hsl(0,93.5%,81.8%)',
-            400: 'hsl(0,90.6%,70.8%)',
-            500: 'hsl(0,84.2%,60.2%)',
-            600: 'hsl(0,72.2%,50.6%)',
-            700: 'hsl(0,73.7%,41.8%)',
-            800: 'hsl(0,70%,35.3%)',
-            900: 'hsl(0,62.8%,30.6%)',
-        },
-        green: {
-            50: 'hsl(152,81%,95.9%)',
-            100: 'hsl(149,80.4%,90%)',
-            200: 'hsl(152,76%,80.4%)',
-            300: 'hsl(156,71.6%,66.9%)',
-            400: 'hsl(158,64.4%,51.6%)',
-            500: 'hsl(160,84.1%,39.4%)',
-            600: 'hsl(161,93.5%,30.4%)',
-            700: 'hsl(163,93.5%,24.3%)',
-            800: 'hsl(163,88.1%,19.8%)',
-            900: 'hsl(164,85.7%,16.5%)',
-        },
-        primary: 'hsl(217,91.2%,59.8%)',
-        saxe: {
-            50: '#D0D4E9',
-            100: '#C1C5E2',
-            200: '#A1A8D3',
-            300: '#828CC4',
-            400: '#636FB6',
-            500: '#4B57A0',
-            600: '#3C4680',
-            700: '#2E3561',
-            800: '#1F2442',
-            900: '#14172A',
-            950: '#0E101E'
-        }
-    },
-    space: spaceScale,
-    fontSize: fontSizeScale,
-    shadow: shadows,
-    transition: transitions,
-    rounded: borderRadiusScale,
-});
-
-globalStyle("*", {
-    boxSizing: 'border-box',
-});
-
-globalStyle("html, body", {
-    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
-    color: themeVars.color.font.default
-});
-
-globalStyle("strong, h1, h2, h3, h4, h5, h6", {
-    fontWeight: "500",
-});
+import {createGlobalTheme, globalStyle, styleVariants} from '@vanilla-extract/css';
+import {fonts} from "./typography.css";
+
+export const spaceScale = {
+    '0': '0px',
+    '0.5': '2px',
+    '1': '4px',
+    '1.5': '6px',
+    '2': '8px',
+    '2.5': '10px',
+    '3': '12px',
+    '3.5': '14px',
+    '4': '16px',
+    '5': '18px',
+};
+
+export const marginVariants = styleVariants(spaceScale, (space) => ({
+    margin: space
+}));
+
+export const borderRadiusScale = {
+    'none': '0px',
+    'xsmall': '1px',
+    'small': '2px',
+    'default': '4px',
+    'medium': '6px',
+    'large': '8px',
+    'xlarge': '12px',
+    'full': '9999px',
+};
+
+export const borderRadiusVariants = styleVariants(borderRadiusScale, (borderRadius) => ({
+    borderRadius: borderRadius
+}));
+
+export const fontSizeScale = {
+    'base': '14px',
+    'xsmall': '10px',
+    'small': '12px',
+    'large': '16px',
+    'xlarge': '18px',
+    'xxlarge': '20px',
+};
+
+export const fontSizeVariants = styleVariants(fontSizeScale, (fontSize) => ({
+    fontSize: fontSize
+}));
+
+export const shadows = {
+    'sm': '0px 3px 6px 1px rgb(154 161 171 / 15%)',
+    'md': '0px 4px 10px 1px rgb(154 161 171 / 20%)',
+    'lg': '0px 7px 14px 1px rgb(154 161 171 / 23%)'
+}
+
+export const shadowVariants = styleVariants(shadows, (shadow) => ({
+    boxShadow: shadow
+}));
+
+export const transitions = {
+    'default': 'cubic-bezier(0.4, 0, 0.2, 1)',
+}
+
+export const transitionsVariants = styleVariants(transitions, (transition) => ({
+    transition: transition
+}));
+
+export const themeVars = createGlobalTheme(':root', {
+    color: {
+        font: {
+            default: '#1F2328',
+            muted: '#656d76',
+            subtle: '#6e7781',
+            text: '#24292f'
+        },
+        gray: {
+            50: 'hsl(0,0%,98%)',
+            100: '#f6f8fa',
+            150: '#f2f3f5',
+            200: '#eaeef2',
+            250: '#f3f4f6',
+            300: '#d0d7de',
+            400: '#afb8c1',
+            500: '#8c959f',
+            600: '#6e7781',
+            700: '#57606a',
+            800: '#424a53',
+            900: '#32383f',
+        },
+        blue: {
+            50: 'hsl(214,100%,96.9%)',
+            100: 'hsl(214,94.6%,92.7%)',
+            200: 'hsl(213,96.9%,87.3%)',
+            300: 'hsl(212,96.4%,78.4%)',
+            400: 'hsl(213,93.9%,67.8%)',
+            500: 'hsl(217,91.2%,59.8%)',
+            600: 'hsl(221,83.2%,53.3%)',
+            700: 'hsl(224,76.3%,48%)',
+            800: 'hsl(226,70.7%,40.2%)',
+            900: 'hsl(224,64.3%,32.9%)',
+        },
+        amber: {
+            50: 'hsl(48,100%,96.1%)',
+            100: 'hsl(48,96.5%,88.8%)',
+            200: 'hsl(48,96.6%,76.7%)',
+            300: 'hsl(46,96.7%,64.5%)',
+            400: 'hsl(43,96.4%,56.3%)',
+            500: 'hsl(38,92.1%,50.2%)',
+            600: 'hsl(32,94.6%,43.7%)',
+            700: 'hsl(26,90.5%,37.1%)',
+            800: 'hsl(23,82.5%,31.4%)',
+            900: 'hsl(22,77.8%,26.5%)',
+        },
+        red: {
+            50: 'hsl(0,85.7%,97.3%)',
+            100: 'hsl(0,93.3%,94.1%)',
+            200: 'hsl(0,96.3%,89.4%)',
+            300: 'hsl(0,93.5%,81.8%)',
+            400: 'hsl(0,90.6%,70.8%)',
+            500: 'hsl(0,84.2%,60.2%)',
+            600: 'hsl(0,72.2%,50.6%)',
+            700: 'hsl(0,73.7%,41.8%)',
+            800: 'hsl(0,70%,35.3%)',
+            900: 'hsl(0,62.8%,30.6%)',
+        },
+        green: {
+            50: 'hsl(152,81%,95.9%)',
+            100: 'hsl(149,80.4%,90%)',
+            200: 'hsl(152,76%,80.4%)',
+            300: 'hsl(156,71.6%,66.9%)',
+            400: 'hsl(158,64.4%,51.6%)',
+            500: 'hsl(160,84.1%,39.4%)',
+            600: 'hsl(161,93.5%,30.4%)',
+            700: 'hsl(163,93.5%,24.3%)',
+            800: 'hsl(163,88.1%,19.8%)',
+            900: 'hsl(164,85.7%,16.5%)',
+        },
+        primary: 'hsl(217,91.2%,59.8%)',
+        saxe: {
+            50: '#D0D4E9',
+            100: '#C1C5E2',
+            200: '#A1A8D3',
+            300: '#828CC4',
+            400: '#636FB6',
+            500: '#4B57A0',
+            600: '#3C4680',
+            700: '#2E3561',
+            800: '#1F2442',
+            900: '#14172A',
+            950: '#0E101E'
+        }
+    },
+    space: spaceScale,
+    fontSize: fontSizeScale,
+    shadow: shadows,
+    transition: transitions,
+    rounded: borderRadiusScale,
+});
+
+globalStyle("*", {
+    boxSizing: 'border-box',
+});
+
+globalStyle("html, body", {
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
+    color: themeVars.color.font.default
+});
+
+globalStyle("strong, h1, h2, h3, h4, h5, h6", {
+    fontWeight: "500",
+});