@breadstone/mosaik-themes 0.0.173 → 0.0.174

package/Themes/cosmopolitan-tokens.scss

@@ -0,0 +1,211 @@
+$name: "cosmopolitan";
+$font-family: 'Noto Sans', sans-serif;
+$layout-radius: 3px;
+$layout-space: 8px;
+$layout-thickness: 1px;
+$scheme-light-contrast: #ffffff;
+$scheme-light-background: #ffffff;
+$scheme-light-foreground: #000000;
+$scheme-light-highlight: #E2E2E2;
+$scheme-light-middlelight: #777777;
+$scheme-light-lowlight: #4D4D4D;
+$scheme-light-transparent: #FFFFFF00;
+$scheme-light-semi-transparent: #FFFFFFAA;
+$scheme-light-disabled: #B8B5B2;
+$scheme-dark-contrast: #ffffff;
+$scheme-dark-background: #2E2D2D;
+$scheme-dark-foreground: #ffffff;
+$scheme-dark-highlight: #333333;
+$scheme-dark-middlelight: #666666;
+$scheme-dark-lowlight: #999999;
+$scheme-dark-transparent: #17171700;
+$scheme-dark-semi-transparent: #171717aa;
+$scheme-dark-disabled: #5C5956;
+$color-light-primary-0: #ffffff;
+$color-light-primary-100: #fed7ea;
+$color-light-primary-500: #dc1884;
+$color-dark-primary-0: #000000;
+$color-dark-primary-100: #4b0225;
+$color-dark-primary-500: #dc1884;
+$typography-heading-font-size: 24px;
+$typography-heading-line-height: 28px;
+$typography-heading-font-weight: 300;
+$typography-heading-letter-spacing: -0.25px;
+$typography-heading-text-decoration: none;
+$typography-heading-text-transform: none;
+$typography-content-font-size: 16px;
+$typography-content-line-height: 20px;
+$typography-content-font-weight: 300;
+$typography-content-letter-spacing: -0.25px;
+$typography-content-text-decoration: none;
+$typography-content-text-transform: none;
+$typography-button-font-size: 16px;
+$typography-button-line-height: 20px;
+$typography-button-font-weight: 700;
+$typography-button-letter-spacing: -0.25px;
+$typography-button-text-decoration: none;
+$typography-button-text-transform: uppercase;
+$elevation-none: none;
+$elevation-light-light: 0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 1px 2px 0px rgba(0, 0, 0, 0.14);
+$elevation-light-light-offset-x-0: 0px;
+$elevation-light-light-offset-x-1: 0px;
+$elevation-light-light-offset-y-0: 0px;
+$elevation-light-light-offset-y-1: 1px;
+$elevation-light-light-blur-0: 2px;
+$elevation-light-light-blur-1: 2px;
+$elevation-light-light-spread-0: 0px;
+$elevation-light-light-spread-1: 0px;
+$elevation-light-light-color-0: rgba(0, 0, 0, 0.12);
+$elevation-light-light-color-1: rgba(0, 0, 0, 0.14);
+$elevation-light-semilight: 0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 2px 4px 0px rgba(0, 0, 0, 0.14);
+$elevation-light-semilight-offset-x-0: 0px;
+$elevation-light-semilight-offset-x-1: 0px;
+$elevation-light-semilight-offset-y-0: 0px;
+$elevation-light-semilight-offset-y-1: 2px;
+$elevation-light-semilight-blur-0: 2px;
+$elevation-light-semilight-blur-1: 4px;
+$elevation-light-semilight-spread-0: 0px;
+$elevation-light-semilight-spread-1: 0px;
+$elevation-light-semilight-color-0: rgba(0, 0, 0, 0.12);
+$elevation-light-semilight-color-1: rgba(0, 0, 0, 0.14);
+$elevation-light-regular: 0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 4px 8px 0px rgba(0, 0, 0, 0.14);
+$elevation-light-regular-offset-x-0: 0px;
+$elevation-light-regular-offset-x-1: 0px;
+$elevation-light-regular-offset-y-0: 0px;
+$elevation-light-regular-offset-y-1: 4px;
+$elevation-light-regular-blur-0: 2px;
+$elevation-light-regular-blur-1: 8px;
+$elevation-light-regular-spread-0: 0px;
+$elevation-light-regular-spread-1: 0px;
+$elevation-light-regular-color-0: rgba(0, 0, 0, 0.12);
+$elevation-light-regular-color-1: rgba(0, 0, 0, 0.14);
+$elevation-light-semibold: 0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 8px 16px 0px rgba(0, 0, 0, 0.14);
+$elevation-light-semibold-offset-x-0: 0px;
+$elevation-light-semibold-offset-x-1: 0px;
+$elevation-light-semibold-offset-y-0: 0px;
+$elevation-light-semibold-offset-y-1: 8px;
+$elevation-light-semibold-blur-0: 2px;
+$elevation-light-semibold-blur-1: 16px;
+$elevation-light-semibold-spread-0: 0px;
+$elevation-light-semibold-spread-1: 0px;
+$elevation-light-semibold-color-0: rgba(0, 0, 0, 0.12);
+$elevation-light-semibold-color-1: rgba(0, 0, 0, 0.14);
+$elevation-light-bold: 0px 0px 8px 0px rgba(0, 0, 0, 0.12), 0px 14px 28px 0px rgba(0, 0, 0, 0.14);
+$elevation-light-bold-offset-x-0: 0px;
+$elevation-light-bold-offset-x-1: 0px;
+$elevation-light-bold-offset-y-0: 0px;
+$elevation-light-bold-offset-y-1: 14px;
+$elevation-light-bold-blur-0: 8px;
+$elevation-light-bold-blur-1: 28px;
+$elevation-light-bold-spread-0: 0px;
+$elevation-light-bold-spread-1: 0px;
+$elevation-light-bold-color-0: rgba(0, 0, 0, 0.12);
+$elevation-light-bold-color-1: rgba(0, 0, 0, 0.14);
+$elevation-light-extrabold: 0px 0px 8px 0px rgba(0, 0, 0, 0.12), 0px 32px 64px 0px rgba(0, 0, 0, 0.14);
+$elevation-light-extrabold-offset-x-0: 0px;
+$elevation-light-extrabold-offset-x-1: 0px;
+$elevation-light-extrabold-offset-y-0: 0px;
+$elevation-light-extrabold-offset-y-1: 32px;
+$elevation-light-extrabold-blur-0: 8px;
+$elevation-light-extrabold-blur-1: 64px;
+$elevation-light-extrabold-spread-0: 0px;
+$elevation-light-extrabold-spread-1: 0px;
+$elevation-light-extrabold-color-0: rgba(0, 0, 0, 0.12);
+$elevation-light-extrabold-color-1: rgba(0, 0, 0, 0.14);
+$elevation-dark-light: 0px 0px 2px 0px rgba(0, 0, 0, 0.24), 0px 1px 2px 0px rgba(0, 0, 0, 0.28);
+$elevation-dark-light-offset-x-0: 0px;
+$elevation-dark-light-offset-x-1: 0px;
+$elevation-dark-light-offset-y-0: 0px;
+$elevation-dark-light-offset-y-1: 1px;
+$elevation-dark-light-blur-0: 2px;
+$elevation-dark-light-blur-1: 2px;
+$elevation-dark-light-spread-0: 0px;
+$elevation-dark-light-spread-1: 0px;
+$elevation-dark-light-color-0: rgba(0, 0, 0, 0.24);
+$elevation-dark-light-color-1: rgba(0, 0, 0, 0.28);
+$elevation-dark-semilight: 0px 0px 2px 0px rgba(0, 0, 0, 0.24), 0px 2px 4px 0px rgba(0, 0, 0, 0.28);
+$elevation-dark-semilight-offset-x-0: 0px;
+$elevation-dark-semilight-offset-x-1: 0px;
+$elevation-dark-semilight-offset-y-0: 0px;
+$elevation-dark-semilight-offset-y-1: 2px;
+$elevation-dark-semilight-blur-0: 2px;
+$elevation-dark-semilight-blur-1: 4px;
+$elevation-dark-semilight-spread-0: 0px;
+$elevation-dark-semilight-spread-1: 0px;
+$elevation-dark-semilight-color-0: rgba(0, 0, 0, 0.24);
+$elevation-dark-semilight-color-1: rgba(0, 0, 0, 0.28);
+$elevation-dark-regular: 0px 0px 2px 0px rgba(0, 0, 0, 0.24), 0px 4px 8px 0px rgba(0, 0, 0, 0.28);
+$elevation-dark-regular-offset-x-0: 0px;
+$elevation-dark-regular-offset-x-1: 0px;
+$elevation-dark-regular-offset-y-0: 0px;
+$elevation-dark-regular-offset-y-1: 4px;
+$elevation-dark-regular-blur-0: 2px;
+$elevation-dark-regular-blur-1: 8px;
+$elevation-dark-regular-spread-0: 0px;
+$elevation-dark-regular-spread-1: 0px;
+$elevation-dark-regular-color-0: rgba(0, 0, 0, 0.24);
+$elevation-dark-regular-color-1: rgba(0, 0, 0, 0.28);
+$elevation-dark-semibold: 0px 0px 2px 0px rgba(0, 0, 0, 0.24), 0px 8px 16px 0px rgba(0, 0, 0, 0.28);
+$elevation-dark-semibold-offset-x-0: 0px;
+$elevation-dark-semibold-offset-x-1: 0px;
+$elevation-dark-semibold-offset-y-0: 0px;
+$elevation-dark-semibold-offset-y-1: 8px;
+$elevation-dark-semibold-blur-0: 2px;
+$elevation-dark-semibold-blur-1: 16px;
+$elevation-dark-semibold-spread-0: 0px;
+$elevation-dark-semibold-spread-1: 0px;
+$elevation-dark-semibold-color-0: rgba(0, 0, 0, 0.24);
+$elevation-dark-semibold-color-1: rgba(0, 0, 0, 0.28);
+$elevation-dark-bold: 0px 0px 8px 0px rgba(0, 0, 0, 0.24), 0px 14px 28px 0px rgba(0, 0, 0, 0.28);
+$elevation-dark-bold-offset-x-0: 0px;
+$elevation-dark-bold-offset-x-1: 0px;
+$elevation-dark-bold-offset-y-0: 0px;
+$elevation-dark-bold-offset-y-1: 14px;
+$elevation-dark-bold-blur-0: 8px;
+$elevation-dark-bold-blur-1: 28px;
+$elevation-dark-bold-spread-0: 0px;
+$elevation-dark-bold-spread-1: 0px;
+$elevation-dark-bold-color-0: rgba(0, 0, 0, 0.24);
+$elevation-dark-bold-color-1: rgba(0, 0, 0, 0.28);
+$elevation-dark-extrabold: 0px 0px 8px 0px rgba(0, 0, 0, 0.24), 0px 32px 64px 0px rgba(0, 0, 0, 0.28);
+$elevation-dark-extrabold-offset-x-0: 0px;
+$elevation-dark-extrabold-offset-x-1: 0px;
+$elevation-dark-extrabold-offset-y-0: 0px;
+$elevation-dark-extrabold-offset-y-1: 32px;
+$elevation-dark-extrabold-blur-0: 8px;
+$elevation-dark-extrabold-blur-1: 64px;
+$elevation-dark-extrabold-spread-0: 0px;
+$elevation-dark-extrabold-spread-1: 0px;
+$elevation-dark-extrabold-color-0: rgba(0, 0, 0, 0.24);
+$elevation-dark-extrabold-color-1: rgba(0, 0, 0, 0.28);
+$size-tiny: 2px;
+$size-small: 4px;
+$size-medium: 8px;
+$size-large: 16px;
+$size-giant: 32px;
+$size-key-tiny: "tiny";
+$size-key-small: "small";
+$size-key-medium: "medium";
+$size-key-large: "large";
+$size-key-giant: "giant";
+$typography-key-heading: "heading";
+$typography-key-content: "content";
+$typography-key-button: "button";
+$elevation-key-light: "light";
+$elevation-key-semilight: "semilight";
+$elevation-key-regular: "regular";
+$elevation-key-semibold: "semibold";
+$elevation-key-bold: "bold";
+$elevation-key-extrabold: "extrabold";
+$variant-primary: "primary";
+$variant-secondary: "secondary";
+$variant-tertiary: "tertiary";
+$duration-short: 200ms;
+$duration-medium: 400ms;
+$duration-long: 600ms;
+$typography-heading-font-family: $font-family;
+$typography-content-font-family: $font-family;
+$typography-button-font-family: $font-family;
+$size-key: $size-key-tiny $size-key-small $size-key-medium $size-key-large $size-key-giant;
+$elevation-key: $elevation-key-light $elevation-key-semilight $elevation-key-regular $elevation-key-semibold $elevation-key-bold $elevation-key-extrabold;
+$variant: $variant-primary;

package/Themes/cosmopolitan-tokens.tailwind.js

@@ -0,0 +1,32 @@
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        'ELEVATION_LIGHT_LIGHT_COLOR_0': 'rgba(0, 0, 0, 0.12)',
+        'ELEVATION_LIGHT_LIGHT_COLOR_1': 'rgba(0, 0, 0, 0.14)',
+        'ELEVATION_LIGHT_SEMILIGHT_COLOR_0': 'rgba(0, 0, 0, 0.12)',
+        'ELEVATION_LIGHT_SEMILIGHT_COLOR_1': 'rgba(0, 0, 0, 0.14)',
+        'ELEVATION_LIGHT_REGULAR_COLOR_0': 'rgba(0, 0, 0, 0.12)',
+        'ELEVATION_LIGHT_REGULAR_COLOR_1': 'rgba(0, 0, 0, 0.14)',
+        'ELEVATION_LIGHT_SEMIBOLD_COLOR_0': 'rgba(0, 0, 0, 0.12)',
+        'ELEVATION_LIGHT_SEMIBOLD_COLOR_1': 'rgba(0, 0, 0, 0.14)',
+        'ELEVATION_LIGHT_BOLD_COLOR_0': 'rgba(0, 0, 0, 0.12)',
+        'ELEVATION_LIGHT_BOLD_COLOR_1': 'rgba(0, 0, 0, 0.14)',
+        'ELEVATION_LIGHT_EXTRABOLD_COLOR_0': 'rgba(0, 0, 0, 0.12)',
+        'ELEVATION_LIGHT_EXTRABOLD_COLOR_1': 'rgba(0, 0, 0, 0.14)',
+        'ELEVATION_DARK_LIGHT_COLOR_0': 'rgba(0, 0, 0, 0.24)',
+        'ELEVATION_DARK_LIGHT_COLOR_1': 'rgba(0, 0, 0, 0.28)',
+        'ELEVATION_DARK_SEMILIGHT_COLOR_0': 'rgba(0, 0, 0, 0.24)',
+        'ELEVATION_DARK_SEMILIGHT_COLOR_1': 'rgba(0, 0, 0, 0.28)',
+        'ELEVATION_DARK_REGULAR_COLOR_0': 'rgba(0, 0, 0, 0.24)',
+        'ELEVATION_DARK_REGULAR_COLOR_1': 'rgba(0, 0, 0, 0.28)',
+        'ELEVATION_DARK_SEMIBOLD_COLOR_0': 'rgba(0, 0, 0, 0.24)',
+        'ELEVATION_DARK_SEMIBOLD_COLOR_1': 'rgba(0, 0, 0, 0.28)',
+        'ELEVATION_DARK_BOLD_COLOR_0': 'rgba(0, 0, 0, 0.24)',
+        'ELEVATION_DARK_BOLD_COLOR_1': 'rgba(0, 0, 0, 0.28)',
+        'ELEVATION_DARK_EXTRABOLD_COLOR_0': 'rgba(0, 0, 0, 0.24)',
+        'ELEVATION_DARK_EXTRABOLD_COLOR_1': 'rgba(0, 0, 0, 0.28)',
+      }
+    }
+  }
+};

package/Themes/fluent-tokens.scss

@@ -0,0 +1,28 @@
+$name: "fluent";
+$font-family: 'Inter', Roboto, Helvetica, sans-serif;
+$layout-radius: 12px;
+$layout-space: 8px;
+$layout-thickness: 2px;
+$color-light-primary: #0078D4;
+$color-light-secondary: #005A9E;
+$color-light-tertiary: #003E6B;
+$elevation-none: none;
+$size-tiny: 2px;
+$size-small: 4px;
+$size-medium: 8px;
+$size-large: 16px;
+$size-giant: 32px;
+$size-key-tiny: "tiny";
+$size-key-small: "small";
+$size-key-medium: "medium";
+$size-key-large: "large";
+$size-key-giant: "giant";
+$duration-duration-ultra-fast: 50ms;
+$duration-duration-faster: 100ms;
+$duration-duration-fast: 150ms;
+$duration-duration-normal: 200ms;
+$duration-duration-gentle: 250ms;
+$duration-duration-slow: 300ms;
+$duration-duration-slower: 400ms;
+$duration-duration-ultra-slow: 500ms;
+$size-key: $size-key-tiny $size-key-small $size-key-medium $size-key-large $size-key-giant;

package/Themes/fluent-tokens.tailwind.js

@@ -0,0 +1,8 @@
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+      }
+    }
+  }
+};