@basic-ui/material 1.0.0-alpha.51 → 1.0.0-alpha.54

package/src/tailwind/tests/extendColors.test.ts

@@ -1,123 +1,123 @@
-import { extendColors } from '../extendColors';
-
-test('extendColors', () => {
-  expect(
-    extendColors({
-      colors: {
-        primary: '#123456',
-        'primary-container': '#123456',
-        secondary: '#123456',
-        surface: '#123456',
-        'surface-container-lowest': '#123456',
-        'surface-container-low': '#123456',
-        'surface-container': '#123456',
-        'surface-container-high': '#123456',
-        'surface-container-highest': '#123456',
-        on: {
-          primary: '#123456',
-          'primary-container': '#123456',
-          surface: '#123456',
-          'surface-container-lowest': '#123456',
-          'surface-container-low': '#123456',
-          'surface-container': '#123456',
-          'surface-container-high': '#123456',
-          'surface-container-highest': '#123456',
-        },
-      },
-    } as any)
-  ).toMatchInlineSnapshot(`
-    Object {
-      "on": Object {
-        "primary": Object {
-          "DEFAULT": "rgba(var(--on-primary--rgb), <alpha-value>)",
-          "container": "rgba(var(--on-primary-container--rgb), <alpha-value>)",
-        },
-        "surface": Object {
-          "DEFAULT": "rgba(var(--on-surface--rgb), <alpha-value>)",
-          "container": Object {
-            "DEFAULT": "rgba(var(--on-surface-container--rgb), <alpha-value>)",
-            "high": "rgba(var(--on-surface-container-high--rgb), <alpha-value>)",
-            "highest": "rgba(var(--on-surface-container-highest--rgb), <alpha-value>)",
-            "low": "rgba(var(--on-surface-container-low--rgb), <alpha-value>)",
-            "lowest": "rgba(var(--on-surface-container-lowest--rgb), <alpha-value>)",
-          },
-        },
-      },
-      "primary": Object {
-        "DEFAULT": "rgba(var(--primary--rgb), <alpha-value>)",
-        "container": "rgba(var(--primary-container--rgb), <alpha-value>)",
-      },
-      "secondary": "rgba(var(--secondary--rgb), <alpha-value>)",
-      "surface": Object {
-        "DEFAULT": "rgba(var(--surface--rgb), <alpha-value>)",
-        "container": Object {
-          "DEFAULT": "rgba(var(--surface-container--rgb), <alpha-value>)",
-          "high": "rgba(var(--surface-container-high--rgb), <alpha-value>)",
-          "highest": "rgba(var(--surface-container-highest--rgb), <alpha-value>)",
-          "low": "rgba(var(--surface-container-low--rgb), <alpha-value>)",
-          "lowest": "rgba(var(--surface-container-lowest--rgb), <alpha-value>)",
-        },
-      },
-    }
-  `);
-
-  expect(
-    extendColors({
-      colors: {
-        primary: '#123456',
-        'primary-container': '#123456',
-        secondary: '#123456',
-        'surface-container-lowest': '#123456',
-        'surface-container-low': '#123456',
-        'surface-container-high': '#123456',
-        'surface-container-highest': '#123456',
-        'surface-container': '#123456',
-        surface: '#123456',
-        on: {
-          primary: '#123456',
-          'primary-container': '#123456',
-          surface: '#123456',
-          'surface-container-lowest': '#123456',
-          'surface-container-low': '#123456',
-          'surface-container': '#123456',
-          'surface-container-high': '#123456',
-          'surface-container-highest': '#123456',
-        },
-      },
-    } as any)
-  ).toMatchInlineSnapshot(`
-    Object {
-      "on": Object {
-        "primary": Object {
-          "DEFAULT": "rgba(var(--on-primary--rgb), <alpha-value>)",
-          "container": "rgba(var(--on-primary-container--rgb), <alpha-value>)",
-        },
-        "surface": Object {
-          "DEFAULT": "rgba(var(--on-surface--rgb), <alpha-value>)",
-          "container": Object {
-            "DEFAULT": "rgba(var(--on-surface-container--rgb), <alpha-value>)",
-            "high": "rgba(var(--on-surface-container-high--rgb), <alpha-value>)",
-            "highest": "rgba(var(--on-surface-container-highest--rgb), <alpha-value>)",
-            "low": "rgba(var(--on-surface-container-low--rgb), <alpha-value>)",
-            "lowest": "rgba(var(--on-surface-container-lowest--rgb), <alpha-value>)",
-          },
-        },
-      },
-      "primary": Object {
-        "DEFAULT": "rgba(var(--primary--rgb), <alpha-value>)",
-        "container": "rgba(var(--primary-container--rgb), <alpha-value>)",
-      },
-      "secondary": "rgba(var(--secondary--rgb), <alpha-value>)",
-      "surface": Object {
-        "DEFAULT": "rgba(var(--surface--rgb), <alpha-value>)",
-        "container": Object {
-          "DEFAULT": "rgba(var(--surface-container--rgb), <alpha-value>)",
-          "high": "rgba(var(--surface-container-high--rgb), <alpha-value>)",
-          "highest": "rgba(var(--surface-container-highest--rgb), <alpha-value>)",
-          "low": "rgba(var(--surface-container-low--rgb), <alpha-value>)",
-          "lowest": "rgba(var(--surface-container-lowest--rgb), <alpha-value>)",
-        },
-      },
-    }
-  `);
-});
+import { extendColors } from '../extendColors';
+
+test('extendColors', () => {
+  expect(
+    extendColors({
+      colors: {
+        primary: '#123456',
+        'primary-container': '#123456',
+        secondary: '#123456',
+        surface: '#123456',
+        'surface-container-lowest': '#123456',
+        'surface-container-low': '#123456',
+        'surface-container': '#123456',
+        'surface-container-high': '#123456',
+        'surface-container-highest': '#123456',
+        on: {
+          primary: '#123456',
+          'primary-container': '#123456',
+          surface: '#123456',
+          'surface-container-lowest': '#123456',
+          'surface-container-low': '#123456',
+          'surface-container': '#123456',
+          'surface-container-high': '#123456',
+          'surface-container-highest': '#123456',
+        },
+      },
+    } as any)
+  ).toMatchInlineSnapshot(`
+    Object {
+      "on": Object {
+        "primary": Object {
+          "DEFAULT": "rgba(var(--on-primary--rgb), <alpha-value>)",
+          "container": "rgba(var(--on-primary-container--rgb), <alpha-value>)",
+        },
+        "surface": Object {
+          "DEFAULT": "rgba(var(--on-surface--rgb), <alpha-value>)",
+          "container": Object {
+            "DEFAULT": "rgba(var(--on-surface-container--rgb), <alpha-value>)",
+            "high": "rgba(var(--on-surface-container-high--rgb), <alpha-value>)",
+            "highest": "rgba(var(--on-surface-container-highest--rgb), <alpha-value>)",
+            "low": "rgba(var(--on-surface-container-low--rgb), <alpha-value>)",
+            "lowest": "rgba(var(--on-surface-container-lowest--rgb), <alpha-value>)",
+          },
+        },
+      },
+      "primary": Object {
+        "DEFAULT": "rgba(var(--primary--rgb), <alpha-value>)",
+        "container": "rgba(var(--primary-container--rgb), <alpha-value>)",
+      },
+      "secondary": "rgba(var(--secondary--rgb), <alpha-value>)",
+      "surface": Object {
+        "DEFAULT": "rgba(var(--surface--rgb), <alpha-value>)",
+        "container": Object {
+          "DEFAULT": "rgba(var(--surface-container--rgb), <alpha-value>)",
+          "high": "rgba(var(--surface-container-high--rgb), <alpha-value>)",
+          "highest": "rgba(var(--surface-container-highest--rgb), <alpha-value>)",
+          "low": "rgba(var(--surface-container-low--rgb), <alpha-value>)",
+          "lowest": "rgba(var(--surface-container-lowest--rgb), <alpha-value>)",
+        },
+      },
+    }
+  `);
+
+  expect(
+    extendColors({
+      colors: {
+        primary: '#123456',
+        'primary-container': '#123456',
+        secondary: '#123456',
+        'surface-container-lowest': '#123456',
+        'surface-container-low': '#123456',
+        'surface-container-high': '#123456',
+        'surface-container-highest': '#123456',
+        'surface-container': '#123456',
+        surface: '#123456',
+        on: {
+          primary: '#123456',
+          'primary-container': '#123456',
+          surface: '#123456',
+          'surface-container-lowest': '#123456',
+          'surface-container-low': '#123456',
+          'surface-container': '#123456',
+          'surface-container-high': '#123456',
+          'surface-container-highest': '#123456',
+        },
+      },
+    } as any)
+  ).toMatchInlineSnapshot(`
+    Object {
+      "on": Object {
+        "primary": Object {
+          "DEFAULT": "rgba(var(--on-primary--rgb), <alpha-value>)",
+          "container": "rgba(var(--on-primary-container--rgb), <alpha-value>)",
+        },
+        "surface": Object {
+          "DEFAULT": "rgba(var(--on-surface--rgb), <alpha-value>)",
+          "container": Object {
+            "DEFAULT": "rgba(var(--on-surface-container--rgb), <alpha-value>)",
+            "high": "rgba(var(--on-surface-container-high--rgb), <alpha-value>)",
+            "highest": "rgba(var(--on-surface-container-highest--rgb), <alpha-value>)",
+            "low": "rgba(var(--on-surface-container-low--rgb), <alpha-value>)",
+            "lowest": "rgba(var(--on-surface-container-lowest--rgb), <alpha-value>)",
+          },
+        },
+      },
+      "primary": Object {
+        "DEFAULT": "rgba(var(--primary--rgb), <alpha-value>)",
+        "container": "rgba(var(--primary-container--rgb), <alpha-value>)",
+      },
+      "secondary": "rgba(var(--secondary--rgb), <alpha-value>)",
+      "surface": Object {
+        "DEFAULT": "rgba(var(--surface--rgb), <alpha-value>)",
+        "container": Object {
+          "DEFAULT": "rgba(var(--surface-container--rgb), <alpha-value>)",
+          "high": "rgba(var(--surface-container-high--rgb), <alpha-value>)",
+          "highest": "rgba(var(--surface-container-highest--rgb), <alpha-value>)",
+          "low": "rgba(var(--surface-container-low--rgb), <alpha-value>)",
+          "lowest": "rgba(var(--surface-container-lowest--rgb), <alpha-value>)",
+        },
+      },
+    }
+  `);
+});

package/src/theme/index.ts

@@ -1,2 +1,2 @@
-export * from './theme';
-export * from './useTheme';
+export * from './theme';
+export * from './useTheme';

package/src/theme/theme.ts

@@ -35,11 +35,18 @@ export const theme = {
     'secondary-container': '#fbd9ea',
     'tertiary-container': '#ffdbc9',
     'error-container': '#ffdad4',
-    background: '#fcfcfc',
-    surface: '#fcfcfc',
+    background: '#fff8fa',
     'surface-variant': '#efdee5',
     outline: '#81747a',
     'outline-variant': '#d3c2c9',
+    'surface-dim': '#e4d6db',
+    surface: '#fff8fa',
+    'surface-bright': '#fff8fa',
+    'surface-container-lowest': '#ffffff',
+    'surface-container-low': '#fef0f5',
+    'surface-container': '#f8eaef',
+    'surface-container-high': '#f3e5ea',
+    'surface-container-highest': '#eddfe4',
     on: {
       primary: '#ffffff',
       secondary: '#ffffff',
@@ -49,11 +56,18 @@ export const theme = {
       'secondary-container': '#291521',
       'tertiary-container': '#321303',
       'error-container': '#410001',
-      background: '#1f1a1c',
-      surface: '#1f1a1c',
+      background: '#21191d',
       'surface-variant': '#4f4349',
       outline: '#feecf3',
       'outline-variant': '#22191e',
+      'surface-dim': '#21191d',
+      surface: '#21191d',
+      'surface-bright': '#21191d',
+      'surface-container-lowest': '#21191d',
+      'surface-container-low': '#21191d',
+      'surface-container': '#21191d',
+      'surface-container-high': '#21191d',
+      'surface-container-highest': '#21191d',
     },
     modes: {
       dark: {
@@ -65,11 +79,18 @@ export const theme = {
         'secondary-container': '#57404d',
         'tertiary-container': '#653d28',
         'error-container': '#930006',
-        background: '#1f1a1c',
-        surface: '#1f1a1c',
+        background: '#181215',
         'surface-variant': '#4f4349',
         outline: '#9b8d93',
         'outline-variant': '#4f4349',
+        'surface-dim': '#181215',
+        surface: '#181215',
+        'surface-bright': '#3f373b',
+        'surface-container-lowest': '#130c10',
+        'surface-container-low': '#21191d',
+        'surface-container': '#251d21',
+        'surface-container-high': '#30282c',
+        'surface-container-highest': '#3b3236',
         on: {
           primary: '#5b0e47',
           secondary: '#402a37',
@@ -79,11 +100,18 @@ export const theme = {
           'secondary-container': '#fbd9ea',
           'tertiary-container': '#ffdbc9',
           'error-container': '#ffdad4',
-          background: '#eae0e3',
-          surface: '#eae0e3',
+          background: '#eddfe4',
           'surface-variant': '#d3c2c9',
           outline: '#22191e',
           'outline-variant': '#efdee5',
+          'surface-dim': '#eddfe4',
+          surface: '#eddfe4',
+          'surface-bright': '#eddfe4',
+          'surface-container-lowest': '#eddfe4',
+          'surface-container-low': '#eddfe4',
+          'surface-container': '#eddfe4',
+          'surface-container-high': '#eddfe4',
+          'surface-container-highest': '#eddfe4',
         },
       },
     },

package/src/theme/typography-raleway.ts

@@ -1,114 +1,114 @@
-import { rem, em } from 'polished';
-
-export const typography = {
-  googleFonts: 'https://fonts.googleapis.com/css?family=Raleway',
-  fonts: {
-    body: 'Raleway, sans-serif',
-    heading: 'Raleway, sans-serif',
-    monospace: '"Roboto Mono", monospace',
-  },
-  fontWeights: {
-    light: 'lighter',
-    regular: 'normal',
-    medium: '600',
-  },
-  lineHeights: {
-    body: 1.5,
-    heading: 1.2,
-  },
-  text: {
-    caps: {
-      textTransform: 'uppercase',
-      fontFamily: 'body',
-      lineHeight: 'body',
-      letterSpacing: '0.1em',
-    },
-    heading: {
-      fontFamily: 'heading',
-      lineHeight: 'heading',
-    },
-    display: {
-      fontFamily: 'body',
-      lineHeight: 'body',
-    },
-    h1: {
-      variant: 'text.heading',
-      fontWeight: 'light',
-      fontSize: rem(98),
-      letterSpacing: em(-1.5, 98),
-    },
-    h2: {
-      variant: 'text.heading',
-      fontWeight: 'light',
-      fontSize: rem(61),
-      letterSpacing: em(-0.5, 61),
-    },
-    h3: {
-      variant: 'text.heading',
-      fontWeight: 'regular',
-      fontSize: rem(49),
-      letterSpacing: em(0, 49),
-    },
-    h4: {
-      variant: 'text.heading',
-      fontWeight: 'regular',
-      fontSize: rem(35),
-      letterSpacing: em(0.25, 35),
-    },
-    h5: {
-      variant: 'text.heading',
-      fontWeight: 'regular',
-      fontSize: rem(24),
-      letterSpacing: em(0, 24),
-    },
-    h6: {
-      variant: 'text.heading',
-      fontWeight: 'medium',
-      fontSize: rem(20),
-      letterSpacing: em(0.15, 20),
-    },
-    subtitle1: {
-      variant: 'text.display',
-      fontWeight: 'regular',
-      fontSize: rem(16),
-      letterSpacing: em(0.15, 16),
-    },
-    subtitle2: {
-      variant: 'text.display',
-      fontWeight: 'medium',
-      fontSize: rem(14),
-      letterSpacing: em(0.1, 14),
-    },
-    body1: {
-      variant: 'text.display',
-      fontWeight: 'regular',
-      fontSize: rem(16),
-      letterSpacing: em(0.5, 16),
-    },
-    body2: {
-      variant: 'text.display',
-      fontWeight: 'regular',
-      fontSize: rem(14),
-      letterSpacing: em(0.25, 14),
-    },
-    button: {
-      variant: 'text.display',
-      fontSize: rem(14),
-      fontWeight: 'medium',
-      letterSpacing: em(1.25, 14),
-      lineHeight: 'normal',
-    },
-    caption: {
-      variant: 'text.display',
-      fontWeight: 'regular',
-      fontSize: rem(12),
-      letterSpacing: em(0.4, 12),
-    },
-    overline: {
-      variant: 'text.caps',
-      fontWeight: 'medium',
-      fontSize: rem(10),
-      letterSpacing: em(1.5, 10),
-    },
-  },
-};
+import { rem, em } from 'polished';
+
+export const typography = {
+  googleFonts: 'https://fonts.googleapis.com/css?family=Raleway',
+  fonts: {
+    body: 'Raleway, sans-serif',
+    heading: 'Raleway, sans-serif',
+    monospace: '"Roboto Mono", monospace',
+  },
+  fontWeights: {
+    light: 'lighter',
+    regular: 'normal',
+    medium: '600',
+  },
+  lineHeights: {
+    body: 1.5,
+    heading: 1.2,
+  },
+  text: {
+    caps: {
+      textTransform: 'uppercase',
+      fontFamily: 'body',
+      lineHeight: 'body',
+      letterSpacing: '0.1em',
+    },
+    heading: {
+      fontFamily: 'heading',
+      lineHeight: 'heading',
+    },
+    display: {
+      fontFamily: 'body',
+      lineHeight: 'body',
+    },
+    h1: {
+      variant: 'text.heading',
+      fontWeight: 'light',
+      fontSize: rem(98),
+      letterSpacing: em(-1.5, 98),
+    },
+    h2: {
+      variant: 'text.heading',
+      fontWeight: 'light',
+      fontSize: rem(61),
+      letterSpacing: em(-0.5, 61),
+    },
+    h3: {
+      variant: 'text.heading',
+      fontWeight: 'regular',
+      fontSize: rem(49),
+      letterSpacing: em(0, 49),
+    },
+    h4: {
+      variant: 'text.heading',
+      fontWeight: 'regular',
+      fontSize: rem(35),
+      letterSpacing: em(0.25, 35),
+    },
+    h5: {
+      variant: 'text.heading',
+      fontWeight: 'regular',
+      fontSize: rem(24),
+      letterSpacing: em(0, 24),
+    },
+    h6: {
+      variant: 'text.heading',
+      fontWeight: 'medium',
+      fontSize: rem(20),
+      letterSpacing: em(0.15, 20),
+    },
+    subtitle1: {
+      variant: 'text.display',
+      fontWeight: 'regular',
+      fontSize: rem(16),
+      letterSpacing: em(0.15, 16),
+    },
+    subtitle2: {
+      variant: 'text.display',
+      fontWeight: 'medium',
+      fontSize: rem(14),
+      letterSpacing: em(0.1, 14),
+    },
+    body1: {
+      variant: 'text.display',
+      fontWeight: 'regular',
+      fontSize: rem(16),
+      letterSpacing: em(0.5, 16),
+    },
+    body2: {
+      variant: 'text.display',
+      fontWeight: 'regular',
+      fontSize: rem(14),
+      letterSpacing: em(0.25, 14),
+    },
+    button: {
+      variant: 'text.display',
+      fontSize: rem(14),
+      fontWeight: 'medium',
+      letterSpacing: em(1.25, 14),
+      lineHeight: 'normal',
+    },
+    caption: {
+      variant: 'text.display',
+      fontWeight: 'regular',
+      fontSize: rem(12),
+      letterSpacing: em(0.4, 12),
+    },
+    overline: {
+      variant: 'text.caps',
+      fontWeight: 'medium',
+      fontSize: rem(10),
+      letterSpacing: em(1.5, 10),
+    },
+  },
+};