@breadstone/mosaik-themes 0.0.12-beta.0

package/Index.d.ts

@@ -0,0 +1,25 @@
+export { BOOTSTRAP_THEME, BOOTSTRAP_THEME_ELEVATION, BOOTSTRAP_THEME_ELEVATION_VARIANTS, BOOTSTRAP_THEME_PALETTES, BOOTSTRAP_THEME_PALETTE_VARIANTS, BOOTSTRAP_THEME_SCHEMES, BOOTSTRAP_THEME_SCHEME_VARIANTS, BOOTSTRAP_THEME_METADATA } from './Theming/BootstrapTheme';
+export { JOY_THEME, JOY_THEME_PALETTES, JOY_THEME_PALETTE_VARIANTS, JOY_THEME_ELEVATION, JOY_THEME_ELEVATION_VARIANTS, JOY_THEME_SCHEMES, JOY_THEME_SCHEME_VARIANTS, JOY_THEME_METADATA } from './Theming/JoyTheme';
+export { RETRO_THEME, RETRO_THEME_PALETTES, RETRO_THEME_ELEVATION, RETRO_THEME_PALETTE_VARIANTS, RETRO_THEME_SCHEMES, RETRO_THEME_SCHEME_VARIANTS, RETRO_THEME_ELEVATION_VARIANTS, RETRO_THEME_METADATA } from './Theming/RetroTheme';
+export { COSMOPOLITAN_THEME, COSMOPOLITAN_THEME_ELEVATION, COSMOPOLITAN_THEME_ELEVATION_VARIANTS, COSMOPOLITAN_THEME_PALETTES, COSMOPOLITAN_THEME_PALETTE_VARIANTS, COSMOPOLITAN_THEME_SCHEMES, COSMOPOLITAN_THEME_SCHEME_VARIANTS, COSMOPOLITAN_THEME_METADATA } from './Theming/CosmopolitanTheme';
+export { CssAspectRatio } from './Theming/Utils/CssAspectRatio';
+export type { CssColor, CssHEXColor, CssRGBAColor, CssRGBColor } from './Theming/Utils/CssColor';
+export { isCssColor } from './Theming/Utils/CssColor';
+export type { CssLengthUnit } from './Theming/Utils/CssLength';
+export { CssLength } from './Theming/Utils/CssLength';
+export type { CssShadowSingle } from './Theming/Utils/CssShadow';
+export { CssShadow } from './Theming/Utils/CssShadow';
+export type { CssTimeUnit } from './Theming/Utils/CssTime';
+export { CssTime } from './Theming/Utils/CssTime';
+export { ITheme } from './Theming/Utils/ITheme';
+export type { IThemeMetadata } from './Theming/Utils/IThemeMetadata';
+export type { IThemeElevation } from './Theming/Utils/IThemeElevation';
+export type { IThemeLayout } from './Theming/Utils/IThemeLayout';
+export { IThemePalette } from './Theming/Utils/IThemePalette';
+export type { IThemeScheme } from './Theming/Utils/IThemeScheme';
+export type { IThemeTypography } from './Theming/Utils/IThemeTypography';
+export type { IThemeTypographyFontType } from './Theming/Utils/IThemeTypographyFontType';
+export type { ThemeMode } from './Theming/ThemeObserver';
+export { ThemeObserver, ThemeObserverServiceLocator } from './Theming/ThemeObserver';
+export { ThemeGeneratorServiceLocator, ThemeGenerator } from './Theming/ThemeGenerator';
+//# sourceMappingURL=Index.d.ts.map

package/Index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Index.d.ts","sourceRoot":"","sources":["../src/Index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,yBAAyB,EAAE,kCAAkC,EAAE,wBAAwB,EAAE,gCAAgC,EAAE,uBAAuB,EAAE,+BAA+B,EAAE,wBAAwB,EAAE,MAAM,0BAA0B,CAAC;AAC1Q,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,0BAA0B,EAAE,mBAAmB,EAAE,4BAA4B,EAAE,iBAAiB,EAAE,yBAAyB,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACpN,OAAO,EAAE,WAAW,EAAE,oBAAoB,EAAE,qBAAqB,EAAE,4BAA4B,EAAE,mBAAmB,EAAE,2BAA2B,EAAE,8BAA8B,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAGtO,OAAO,EAAE,kBAAkB,EAAE,4BAA4B,EAAE,qCAAqC,EAAE,2BAA2B,EAAE,mCAAmC,EAAE,0BAA0B,EAAE,kCAAkC,EAAE,2BAA2B,EAAE,MAAM,6BAA6B,CAAC;AACrS,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAChE,YAAY,EAAE,QAAQ,EAAE,WAAW,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACjG,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,YAAY,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,YAAY,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,YAAY,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,YAAY,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AACrE,YAAY,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AACvE,YAAY,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,YAAY,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AACjE,YAAY,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AACzE,YAAY,EAAE,wBAAwB,EAAE,MAAM,0CAA0C,CAAC;AACzF,YAAY,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,2BAA2B,EAAE,MAAM,yBAAyB,CAAC;AACrF,OAAO,EAAE,4BAA4B,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC"}

package/Index.js

@@ -0,0 +1,16 @@
+export { BOOTSTRAP_THEME, BOOTSTRAP_THEME_ELEVATION, BOOTSTRAP_THEME_ELEVATION_VARIANTS, BOOTSTRAP_THEME_PALETTES, BOOTSTRAP_THEME_PALETTE_VARIANTS, BOOTSTRAP_THEME_SCHEMES, BOOTSTRAP_THEME_SCHEME_VARIANTS, BOOTSTRAP_THEME_METADATA } from './Theming/BootstrapTheme';
+export { JOY_THEME, JOY_THEME_PALETTES, JOY_THEME_PALETTE_VARIANTS, JOY_THEME_ELEVATION, JOY_THEME_ELEVATION_VARIANTS, JOY_THEME_SCHEMES, JOY_THEME_SCHEME_VARIANTS, JOY_THEME_METADATA } from './Theming/JoyTheme';
+export { RETRO_THEME, RETRO_THEME_PALETTES, RETRO_THEME_ELEVATION, RETRO_THEME_PALETTE_VARIANTS, RETRO_THEME_SCHEMES, RETRO_THEME_SCHEME_VARIANTS, RETRO_THEME_ELEVATION_VARIANTS, RETRO_THEME_METADATA } from './Theming/RetroTheme';
+// export { FLUENT_THEME } from './Theming/FluentTheme';
+// export { MATERIAL_THEME } from './Theming/MaterialTheme';
+export { COSMOPOLITAN_THEME, COSMOPOLITAN_THEME_ELEVATION, COSMOPOLITAN_THEME_ELEVATION_VARIANTS, COSMOPOLITAN_THEME_PALETTES, COSMOPOLITAN_THEME_PALETTE_VARIANTS, COSMOPOLITAN_THEME_SCHEMES, COSMOPOLITAN_THEME_SCHEME_VARIANTS, COSMOPOLITAN_THEME_METADATA } from './Theming/CosmopolitanTheme';
+export { CssAspectRatio } from './Theming/Utils/CssAspectRatio';
+export { isCssColor } from './Theming/Utils/CssColor';
+export { CssLength } from './Theming/Utils/CssLength';
+export { CssShadow } from './Theming/Utils/CssShadow';
+export { CssTime } from './Theming/Utils/CssTime';
+export { ITheme } from './Theming/Utils/ITheme';
+export { IThemePalette } from './Theming/Utils/IThemePalette';
+export { ThemeObserver, ThemeObserverServiceLocator } from './Theming/ThemeObserver';
+export { ThemeGeneratorServiceLocator, ThemeGenerator } from './Theming/ThemeGenerator';
+//# sourceMappingURL=Index.js.map

package/Index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Index.js","sourceRoot":"","sources":["../src/Index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,yBAAyB,EAAE,kCAAkC,EAAE,wBAAwB,EAAE,gCAAgC,EAAE,uBAAuB,EAAE,+BAA+B,EAAE,wBAAwB,EAAE,MAAM,0BAA0B,CAAC;AAC1Q,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,0BAA0B,EAAE,mBAAmB,EAAE,4BAA4B,EAAE,iBAAiB,EAAE,yBAAyB,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACpN,OAAO,EAAE,WAAW,EAAE,oBAAoB,EAAE,qBAAqB,EAAE,4BAA4B,EAAE,mBAAmB,EAAE,2BAA2B,EAAE,8BAA8B,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AACtO,wDAAwD;AACxD,4DAA4D;AAC5D,OAAO,EAAE,kBAAkB,EAAE,4BAA4B,EAAE,qCAAqC,EAAE,2BAA2B,EAAE,mCAAmC,EAAE,0BAA0B,EAAE,kCAAkC,EAAE,2BAA2B,EAAE,MAAM,6BAA6B,CAAC;AACrS,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAEhE,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAEtD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAEtD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAEtD,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAIhD,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAK9D,OAAO,EAAE,aAAa,EAAE,2BAA2B,EAAE,MAAM,yBAAyB,CAAC;AACrF,OAAO,EAAE,4BAA4B,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC"}

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Breadstone
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/Themes/___bootstrap-tokens.css

@@ -0,0 +1,80 @@
+:root {
+  --name: "bootstrap";
+  --font-family: 'Inter', Roboto, Helvetica, sans-serif;
+  --layout-radius: 12px;
+  --layout-space: 8px;
+  --layout-thickness: 2px;
+  --color-light-primary-100: #cfe2ff;
+  --color-light-primary-200: #9ec5fe;
+  --color-light-primary-300: #6ea8fe;
+  --color-light-primary-400: #3d8bfd;
+  --color-light-primary-500: #0d6efd;
+  --color-light-primary-600: #0a58ca;
+  --color-light-primary-700: #084298;
+  --color-light-primary-800: #052c65;
+  --color-light-primary-900: #031633;
+  --color-light-secondary-100: #f8f9fa;
+  --color-light-secondary-200: #e9ecef;
+  --color-light-secondary-300: #dee2e6;
+  --color-light-secondary-400: #ced4da;
+  --color-light-secondary-500: #adb5bd;
+  --color-light-secondary-600: #6c757d;
+  --color-light-secondary-700: #495057;
+  --color-light-secondary-800: #343a40;
+  --color-light-secondary-900: #212529;
+  --color-dark-primary-100: #cfe2ff;
+  --color-dark-primary-200: #9ec5fe;
+  --color-dark-primary-300: #6ea8fe;
+  --color-dark-primary-400: #3d8bfd;
+  --color-dark-primary-500: #0d6efd;
+  --color-dark-primary-600: #0a58ca;
+  --color-dark-primary-700: #084298;
+  --color-dark-primary-800: #052c65;
+  --color-dark-primary-900: #031633;
+  --color-dark-secondary-100: #f8f9fa;
+  --color-dark-secondary-200: #e9ecef;
+  --color-dark-secondary-300: #dee2e6;
+  --color-dark-secondary-400: #ced4da;
+  --color-dark-secondary-500: #adb5bd;
+  --color-dark-secondary-600: #6c757d;
+  --color-dark-secondary-700: #495057;
+  --color-dark-secondary-800: #343a40;
+  --color-dark-secondary-900: #212529;
+  --typography-headline1-font-size: 80px;
+  --typography-headline1-line-height: 1.2;
+  --typography-headline1-font-weight: 300;
+  --typography-headline1-letter-spacing: 0;
+  --typography-headline1-text-decoration: none;
+  --typography-headline1-text-transform: none;
+  --typography-headline2-font-size: 72px;
+  --typography-headline2-line-height: 1.2;
+  --typography-headline2-font-weight: 300;
+  --typography-headline2-letter-spacing: 0;
+  --typography-headline2-text-decoration: none;
+  --typography-headline2-text-transform: none;
+  --typography-headline3-font-size: 64px;
+  --typography-headline3-line-height: 1.2;
+  --typography-headline3-font-weight: 300;
+  --typography-headline3-letter-spacing: 0;
+  --typography-headline3-text-decoration: none;
+  --typography-headline3-text-transform: none;
+  --typography-headline4-font-size: 56px;
+  --typography-headline4-line-height: 1.2;
+  --typography-headline4-font-weight: 300;
+  --typography-headline4-letter-spacing: 0;
+  --typography-headline4-text-decoration: none;
+  --typography-headline4-text-transform: none;
+  --typography-headline5-font-size: 48px;
+  --typography-headline5-line-height: 1.2;
+  --typography-headline5-font-weight: 300;
+  --typography-headline5-letter-spacing: 0;
+  --typography-headline5-text-decoration: none;
+  --typography-headline5-text-transform: none;
+  --typography-headline6-font-size: 40px;
+  --typography-headline6-line-height: 1.2;
+  --typography-headline6-font-weight: 300;
+  --typography-headline6-letter-spacing: 0;
+  --typography-headline6-text-decoration: none;
+  --typography-headline6-text-transform: none;
+  --elevation-none: none;
+}

package/Themes/___cosmopolitan-tokens.css

@@ -0,0 +1,208 @@
+:root {
+  --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);
+  --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";
+  --size-tiny: "tiny";
+  --size-small: "small";
+  --size-medium: "medium";
+  --size-large: "large";
+  --size-giant: "giant";
+  --duration-short: 200ms;
+  --duration-medium: 400ms;
+  --duration-long: 600ms;
+  --typography-heading-font-family: var(--font-family);
+  --typography-content-font-family: var(--font-family);
+  --typography-button-font-family: var(--font-family);
+  --elevation-key: var(--elevation-key-light) var(--elevation-key-semilight) var(--elevation-key-regular) var(--elevation-key-semibold) var(--elevation-key-bold) var(--elevation-key-extrabold);
+  --variant: var(--variant-primary);
+  --size: var(--size-tiny) var(--size-small) var(--size-medium) var(--size-large) var(--size-giant);
+}

package/Themes/___default-tokens.css

@@ -0,0 +1,8 @@
+:root {
+  --name: "default";
+  --font-family: 'Inter', Roboto, Helvetica, sans-serif;
+  --layout-radius: 12px;
+  --layout-space: 8px;
+  --layout-thickness: 2px;
+  --elevation-none: none;
+}

package/Themes/___fluent-tokens.css

@@ -0,0 +1,19 @@
+:root {
+  --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;
+  --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;
+}