@teammodlr/ui-kit 2.0.9 → 2.0.13

package/src/components/modal/style/Modal.css.ts

@@ -76,7 +76,7 @@ export const header = style({
     justifyContent: "space-between",
     alignItems: "flex-start",
     padding: `${themeVars.space[4]} ${themeVars.space[4]} 0 ${themeVars.space[4]}`,
-    flexShrink: "0"
+    flexShrink: "0",
 });
 
 export const title = style({
@@ -84,7 +84,8 @@ export const title = style({
     fontSize: `${themeVars.fontSize.xlarge}`,
     fontWeight: "500",
     display: "flex",
-    alignItems: "center"
+    alignItems: "center",
+    color: themeVars.color.font.default
 });
 
 export const close = style([
@@ -102,10 +103,10 @@ export const close = style([
         borderRadius: themeVars.rounded.full,
         marginLeft: themeVars.space[2],
         ':hover': {
-            backgroundColor: themeVars.color.gray[100]
+            backgroundColor: themeVars.color.gray[150],
         },
         ':focus': {
-            backgroundColor: themeVars.color.gray[100]
+            backgroundColor: themeVars.color.gray[150]
         },
         '::before': {
             content: '""',
@@ -138,7 +139,8 @@ export const body = style({
     padding: `${themeVars.space[4]}`,
     display: "flex",
     flexDirection: "column",
-    flexGrow: "1"
+    flexGrow: "1",
+    color: themeVars.color.font.text
 });
 
 export const footer = style({

package/src/components/table/style/Table.css.ts

@@ -27,7 +27,7 @@ export const hoverable = style({});
 export const striped = style({});
 
 globalStyle(`${striped} tbody tr:nth-child(even)`, {
-    backgroundColor: themeVars.color.gray[50],
+    backgroundColor: themeVars.color.gray[100],
 });
 
 globalStyle(`${table} tbody:before`, {
@@ -41,8 +41,8 @@ globalStyle(`${table} th`, {
     height: vars.headerHeight,
     padding: vars.cellPadding,
     textAlign: "left",
-    backgroundColor: themeVars.color.gray[100],
-    color: themeVars.color.gray[600],
+    backgroundColor: themeVars.color.gray[200],
+    color: themeVars.color.gray[700],
     fontWeight: 500,
     fontSize: themeVars.fontSize.base,
     marginBottom: "5px"
@@ -77,5 +77,5 @@ globalStyle(`${table} td`, {
 });
 
 globalStyle(`${hoverable} tr:hover td`, {
-    backgroundColor: themeVars.color.gray[50],
+    backgroundColor: themeVars.color.gray[150],
 });

package/src/index.ts

@@ -1,6 +1,7 @@
 // import './css/index.css';
 export * from './components';
 export * from './composables';
+export * as theme from './styles/theme.css';
 export { default as createUI } from './create';
 export { default } from './install';
 

package/src/styles/theme.css.ts

@@ -66,18 +66,25 @@ export const transitionsVariants = styleVariants(transitions, (transition) => ({
 
 export const themeVars = createGlobalTheme(':root', {
     color: {
+        font: {
+            default: '#1F2328',
+            muted: '#656d76',
+            subtle: '#6e7781',
+            text: '#24292f'
+        },
         gray: {
             50: 'hsl(0,0%,98%)',
-            100: 'hsl(0,0%,96.1%)',
-            150: 'hsl(0,0%,94.9%)',
-            200: 'hsl(0,0%,89.8%)',
-            300: 'hsl(0,0%,83.1%)',
-            400: 'hsl(0,0%,63.9%)',
-            500: 'hsl(0,0%,45.1%)',
-            600: 'hsl(0,0%,32.2%)',
-            700: 'hsl(0,0%,25.1%)',
-            800: 'hsl(0,0%,14.9%)',
-            900: 'hsl(0,0%,9%)',
+            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%)',
@@ -128,6 +135,19 @@ export const themeVars = createGlobalTheme(':root', {
             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,
@@ -142,6 +162,7 @@ globalStyle("*", {
 
 globalStyle("html, body", {
     fontFamily: fonts.INTER.name,
+    color: themeVars.color.font.default
 });
 
 globalStyle("strong, h1, h2, h3, h4, h5, h6", {

package/src/types/props.ts

@@ -2,4 +2,4 @@ export type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 
 export type Color = 'white' | 'black' | 'blue' | 'green' | 'red' | 'yellow' | 'gray';
 
-export type Variant = 'default' | 'tertiary' | 'primary' | 'success' | 'warning' | 'error';
+export type Variant = 'default' | 'tertiary' | 'primary' | 'dark' | 'success' | 'warning' | 'error';