@operato/context 2.0.0-alpha.99 → 2.0.0-beta.0

package/stories/ox-context-toolbar-overflow.stories.ts

@@ -6,11 +6,14 @@ import { TOOL_POSITION } from '@operato/layout'
 import '@operato/styles'
 
 import { css, html, render, TemplateResult } from 'lit'
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
 
 export default {
   title: 'ox-context-toolbar overflow',
   component: 'ox-context-toolbar',
-  argTypes: {}
+  argTypes: {
+    theme: { control: 'select', options: ['light', 'dark'] }
+  }
 }
 
 interface Story<T> {
@@ -19,12 +22,16 @@ interface Story<T> {
   argTypes?: Record<string, unknown>
 }
 
-interface ArgTypes {}
+interface ArgTypes {
+  theme?: string
+}
+
+const Template: Story<ArgTypes> = ({ theme = 'light' }: ArgTypes) => html`
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
 
-const Template: Story<ArgTypes> = () => html`
-  <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="/themes/material-theme.css" rel="stylesheet" />
-  <link href="/themes/context-theme.css" rel="stylesheet" />
+  <link href="/themes/light.css" rel="stylesheet" />
+  <link href="/themes/dark.css" rel="stylesheet" />
+  <link href="/themes/spacing.css" rel="stylesheet" />
 
   <link
     href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
@@ -40,12 +47,30 @@ const Template: Story<ArgTypes> = () => html`
   />
 
   <style>
-    body {
-      background-color: white;
+    ${MDTypeScaleStyles.cssText}
+  </style>
+
+  <style>
+    .container {
+      height: 500px;
+      text-align: center;
+      padding: 20px;
+      background-color: var(--md-sys-color-primary-container);
+      color: var(--md-sys-color-on-primary-container);
+
+      padding: 20px;
+    }
+
+    ox-buttons-radio {
+      padding: 20px;
     }
   </style>
 
-  <div style="height:100px; padding: 10px; background-color: yellow;">
+  <script>
+    document.body.classList.add('${theme}')
+  </script>
+
+  <div class="container md-typescale-body-large-prominent">
     <ox-context-toolbar
       .tools=${[
         {
@@ -80,7 +105,10 @@ const Template: Story<ArgTypes> = () => html`
               {
                 title: 'save',
                 action: () => {},
-                icon: 'save'
+                icon: 'save',
+                emphasis: {
+                  raised: true
+                }
               },
               {
                 title: 'copy',

package/stories/ox-context-toolbar.stories.ts

@@ -6,6 +6,7 @@ import { TOOL_POSITION } from '@operato/layout'
 import '@operato/styles'
 
 import { css, html, render, TemplateResult } from 'lit'
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
 
 export default {
   title: 'ox-context-toolbar',
@@ -19,12 +20,16 @@ interface Story<T> {
   argTypes?: Record<string, unknown>
 }
 
-interface ArgTypes {}
+interface ArgTypes {
+  theme?: string
+}
+
+const Template: Story<ArgTypes> = ({ theme = 'light' }: ArgTypes) => html`
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
 
-const Template: Story<ArgTypes> = () => html`
-  <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="/themes/material-theme.css" rel="stylesheet" />
-  <link href="/themes/context-theme.css" rel="stylesheet" />
+  <link href="/themes/light.css" rel="stylesheet" />
+  <link href="/themes/dark.css" rel="stylesheet" />
+  <link href="/themes/spacing.css" rel="stylesheet" />
 
   <link
     href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
@@ -40,12 +45,34 @@ const Template: Story<ArgTypes> = () => html`
   />
 
   <style>
-    body {
-      background-color: white;
+    ${MDTypeScaleStyles.cssText}
+  </style>
+
+  <style>
+    .container {
+      height: 500px;
+      text-align: center;
+      padding: 20px;
+      background-color: var(--md-sys-color-primary-container);
+      color: var(--md-sys-color-on-primary-container);
+
+      padding: 20px;
+
+      display: flex;
+      flex-direction: column;
+      gap: 20px;
+    }
+
+    ox-buttons-radio {
+      padding: 20px;
     }
   </style>
 
-  <div style="height:500px; padding: 10px; display: flex; flex-direction: column; gap: 10px; background-color: black;">
+  <script>
+    document.body.classList.add('${theme}')
+  </script>
+
+  <div class="container md-typescale-body-large-prominent">
     <ox-context-toolbar
       .tools=${[
         {

package/themes/dark-hc.css

@@ -0,0 +1,51 @@
+.dark-high-contrast {
+  --md-sys-color-primary: rgb(244 255 223);
+  --md-sys-color-surface-tint: rgb(177 209 138);
+  --md-sys-color-on-primary: rgb(0 0 0);
+  --md-sys-color-primary-container: rgb(181 213 142);
+  --md-sys-color-on-primary-container: rgb(0 0 0);
+  --md-sys-color-secondary: rgb(244 255 223);
+  --md-sys-color-on-secondary: rgb(0 0 0);
+  --md-sys-color-secondary-container: rgb(196 207 177);
+  --md-sys-color-on-secondary-container: rgb(0 0 0);
+  --md-sys-color-tertiary: rgb(234 255 252);
+  --md-sys-color-on-tertiary: rgb(0 0 0);
+  --md-sys-color-tertiary-container: rgb(164 212 208);
+  --md-sys-color-on-tertiary-container: rgb(0 0 0);
+  --md-sys-color-error: rgb(255 249 249);
+  --md-sys-color-on-error: rgb(0 0 0);
+  --md-sys-color-error-container: rgb(255 186 177);
+  --md-sys-color-on-error-container: rgb(0 0 0);
+  --md-sys-color-background: rgb(18 20 14);
+  --md-sys-color-on-background: rgb(226 227 216);
+  --md-sys-color-surface: rgb(18 20 14);
+  --md-sys-color-on-surface: rgb(255 255 255);
+  --md-sys-color-surface-variant: rgb(68 72 61);
+  --md-sys-color-on-surface-variant: rgb(249 252 237);
+  --md-sys-color-outline: rgb(201 204 190);
+  --md-sys-color-outline-variant: rgb(201 204 190);
+  --md-sys-color-shadow: rgb(0 0 0);
+  --md-sys-color-scrim: rgb(0 0 0);
+  --md-sys-color-inverse-surface: rgb(226 227 216);
+  --md-sys-color-inverse-on-surface: rgb(0 0 0);
+  --md-sys-color-inverse-primary: rgb(26 48 0);
+  --md-sys-color-primary-fixed: rgb(209 242 167);
+  --md-sys-color-on-primary-fixed: rgb(0 0 0);
+  --md-sys-color-primary-fixed-dim: rgb(181 213 142);
+  --md-sys-color-on-primary-fixed-variant: rgb(12 26 0);
+  --md-sys-color-secondary-fixed: rgb(224 235 204);
+  --md-sys-color-on-secondary-fixed: rgb(0 0 0);
+  --md-sys-color-secondary-fixed-dim: rgb(196 207 177);
+  --md-sys-color-on-secondary-fixed-variant: rgb(16 25 7);
+  --md-sys-color-tertiary-fixed: rgb(192 240 236);
+  --md-sys-color-on-tertiary-fixed: rgb(0 0 0);
+  --md-sys-color-tertiary-fixed-dim: rgb(164 212 208);
+  --md-sys-color-on-tertiary-fixed-variant: rgb(0 26 25);
+  --md-sys-color-surface-dim: rgb(18 20 14);
+  --md-sys-color-surface-bright: rgb(56 58 50);
+  --md-sys-color-surface-container-lowest: rgb(12 15 9);
+  --md-sys-color-surface-container-low: rgb(26 28 22);
+  --md-sys-color-surface-container: rgb(30 32 26);
+  --md-sys-color-surface-container-high: rgb(40 43 36);
+  --md-sys-color-surface-container-highest: rgb(51 54 46);
+}

package/themes/dark-mc.css

@@ -0,0 +1,51 @@
+.dark-medium-contrast {
+  --md-sys-color-primary: rgb(181 213 142);
+  --md-sys-color-surface-tint: rgb(177 209 138);
+  --md-sys-color-on-primary: rgb(12 26 0);
+  --md-sys-color-primary-container: rgb(125 154 89);
+  --md-sys-color-on-primary-container: rgb(0 0 0);
+  --md-sys-color-secondary: rgb(196 207 177);
+  --md-sys-color-on-secondary: rgb(16 25 7);
+  --md-sys-color-secondary-container: rgb(138 149 121);
+  --md-sys-color-on-secondary-container: rgb(0 0 0);
+  --md-sys-color-tertiary: rgb(164 212 208);
+  --md-sys-color-on-tertiary: rgb(0 26 25);
+  --md-sys-color-tertiary-container: rgb(107 153 149);
+  --md-sys-color-on-tertiary-container: rgb(0 0 0);
+  --md-sys-color-error: rgb(255 186 177);
+  --md-sys-color-on-error: rgb(55 0 1);
+  --md-sys-color-error-container: rgb(255 84 73);
+  --md-sys-color-on-error-container: rgb(0 0 0);
+  --md-sys-color-background: rgb(18 20 14);
+  --md-sys-color-on-background: rgb(226 227 216);
+  --md-sys-color-surface: rgb(18 20 14);
+  --md-sys-color-on-surface: rgb(251 252 240);
+  --md-sys-color-surface-variant: rgb(68 72 61);
+  --md-sys-color-on-surface-variant: rgb(201 204 190);
+  --md-sys-color-outline: rgb(161 164 151);
+  --md-sys-color-outline-variant: rgb(129 133 120);
+  --md-sys-color-shadow: rgb(0 0 0);
+  --md-sys-color-scrim: rgb(0 0 0);
+  --md-sys-color-inverse-surface: rgb(226 227 216);
+  --md-sys-color-inverse-on-surface: rgb(40 43 36);
+  --md-sys-color-inverse-primary: rgb(54 79 23);
+  --md-sys-color-primary-fixed: rgb(205 237 163);
+  --md-sys-color-on-primary-fixed: rgb(8 20 0);
+  --md-sys-color-primary-fixed-dim: rgb(177 209 138);
+  --md-sys-color-on-primary-fixed-variant: rgb(37 61 5);
+  --md-sys-color-secondary-fixed: rgb(220 231 200);
+  --md-sys-color-on-secondary-fixed: rgb(11 20 3);
+  --md-sys-color-secondary-fixed-dim: rgb(191 203 173);
+  --md-sys-color-on-secondary-fixed-variant: rgb(48 57 36);
+  --md-sys-color-tertiary-fixed: rgb(188 236 231);
+  --md-sys-color-on-tertiary-fixed: rgb(0 20 19);
+  --md-sys-color-tertiary-fixed-dim: rgb(160 208 203);
+  --md-sys-color-on-tertiary-fixed-variant: rgb(8 61 58);
+  --md-sys-color-surface-dim: rgb(18 20 14);
+  --md-sys-color-surface-bright: rgb(56 58 50);
+  --md-sys-color-surface-container-lowest: rgb(12 15 9);
+  --md-sys-color-surface-container-low: rgb(26 28 22);
+  --md-sys-color-surface-container: rgb(30 32 26);
+  --md-sys-color-surface-container-high: rgb(40 43 36);
+  --md-sys-color-surface-container-highest: rgb(51 54 46);
+}

package/themes/dark.css

@@ -0,0 +1,51 @@
+.dark {
+  --md-sys-color-primary: rgb(177 209 138);
+  --md-sys-color-surface-tint: rgb(177 209 138);
+  --md-sys-color-on-primary: rgb(31 55 1);
+  --md-sys-color-primary-container: rgb(53 78 22);
+  --md-sys-color-on-primary-container: rgb(205 237 163);
+  --md-sys-color-secondary: rgb(191 203 173);
+  --md-sys-color-on-secondary: rgb(42 51 30);
+  --md-sys-color-secondary-container: rgb(64 74 51);
+  --md-sys-color-on-secondary-container: rgb(220 231 200);
+  --md-sys-color-tertiary: rgb(160 208 203);
+  --md-sys-color-on-tertiary: rgb(0 55 53);
+  --md-sys-color-tertiary-container: rgb(31 78 75);
+  --md-sys-color-on-tertiary-container: rgb(188 236 231);
+  --md-sys-color-error: rgb(255 180 171);
+  --md-sys-color-on-error: rgb(105 0 5);
+  --md-sys-color-error-container: rgb(147 0 10);
+  --md-sys-color-on-error-container: rgb(255 218 214);
+  --md-sys-color-background: rgb(18 20 14);
+  --md-sys-color-on-background: rgb(226 227 216);
+  --md-sys-color-surface: rgb(18 20 14);
+  --md-sys-color-on-surface: rgb(226 227 216);
+  --md-sys-color-surface-variant: rgb(68 72 61);
+  --md-sys-color-on-surface-variant: rgb(197 200 186);
+  --md-sys-color-outline: rgb(143 146 133);
+  --md-sys-color-outline-variant: rgb(68 72 61);
+  --md-sys-color-shadow: rgb(0 0 0);
+  --md-sys-color-scrim: rgb(0 0 0);
+  --md-sys-color-inverse-surface: rgb(226 227 216);
+  --md-sys-color-inverse-on-surface: rgb(47 49 42);
+  --md-sys-color-inverse-primary: rgb(76 102 43);
+  --md-sys-color-primary-fixed: rgb(205 237 163);
+  --md-sys-color-on-primary-fixed: rgb(16 32 0);
+  --md-sys-color-primary-fixed-dim: rgb(177 209 138);
+  --md-sys-color-on-primary-fixed-variant: rgb(53 78 22);
+  --md-sys-color-secondary-fixed: rgb(220 231 200);
+  --md-sys-color-on-secondary-fixed: rgb(21 30 11);
+  --md-sys-color-secondary-fixed-dim: rgb(191 203 173);
+  --md-sys-color-on-secondary-fixed-variant: rgb(64 74 51);
+  --md-sys-color-tertiary-fixed: rgb(188 236 231);
+  --md-sys-color-on-tertiary-fixed: rgb(0 32 30);
+  --md-sys-color-tertiary-fixed-dim: rgb(160 208 203);
+  --md-sys-color-on-tertiary-fixed-variant: rgb(31 78 75);
+  --md-sys-color-surface-dim: rgb(18 20 14);
+  --md-sys-color-surface-bright: rgb(56 58 50);
+  --md-sys-color-surface-container-lowest: rgb(12 15 9);
+  --md-sys-color-surface-container-low: rgb(26 28 22);
+  --md-sys-color-surface-container: rgb(30 32 26);
+  --md-sys-color-surface-container-high: rgb(40 43 36);
+  --md-sys-color-surface-container-highest: rgb(51 54 46);
+}

package/themes/light-hc.css

@@ -0,0 +1,51 @@
+.light-high-contrast {
+  --md-sys-color-primary: rgb(20 39 0);
+  --md-sys-color-surface-tint: rgb(76 102 43);
+  --md-sys-color-on-primary: rgb(255 255 255);
+  --md-sys-color-primary-container: rgb(49 74 18);
+  --md-sys-color-on-primary-container: rgb(255 255 255);
+  --md-sys-color-secondary: rgb(28 37 17);
+  --md-sys-color-on-secondary: rgb(255 255 255);
+  --md-sys-color-secondary-container: rgb(60 70 47);
+  --md-sys-color-on-secondary-container: rgb(255 255 255);
+  --md-sys-color-tertiary: rgb(0 39 37);
+  --md-sys-color-on-tertiary: rgb(255 255 255);
+  --md-sys-color-tertiary-container: rgb(26 74 71);
+  --md-sys-color-on-tertiary-container: rgb(255 255 255);
+  --md-sys-color-error: rgb(78 0 2);
+  --md-sys-color-on-error: rgb(255 255 255);
+  --md-sys-color-error-container: rgb(140 0 9);
+  --md-sys-color-on-error-container: rgb(255 255 255);
+  --md-sys-color-background: rgb(249 250 239);
+  --md-sys-color-on-background: rgb(26 28 22);
+  --md-sys-color-surface: rgb(249 250 239);
+  --md-sys-color-on-surface: rgb(0 0 0);
+  --md-sys-color-surface-variant: rgb(225 228 213);
+  --md-sys-color-on-surface-variant: rgb(33 37 28);
+  --md-sys-color-outline: rgb(64 68 57);
+  --md-sys-color-outline-variant: rgb(64 68 57);
+  --md-sys-color-shadow: rgb(0 0 0);
+  --md-sys-color-scrim: rgb(0 0 0);
+  --md-sys-color-inverse-surface: rgb(47 49 42);
+  --md-sys-color-inverse-on-surface: rgb(255 255 255);
+  --md-sys-color-inverse-primary: rgb(214 247 172);
+  --md-sys-color-primary-fixed: rgb(49 74 18);
+  --md-sys-color-on-primary-fixed: rgb(255 255 255);
+  --md-sys-color-primary-fixed-dim: rgb(28 51 0);
+  --md-sys-color-on-primary-fixed-variant: rgb(255 255 255);
+  --md-sys-color-secondary-fixed: rgb(60 70 47);
+  --md-sys-color-on-secondary-fixed: rgb(255 255 255);
+  --md-sys-color-secondary-fixed-dim: rgb(38 48 27);
+  --md-sys-color-on-secondary-fixed-variant: rgb(255 255 255);
+  --md-sys-color-tertiary-fixed: rgb(26 74 71);
+  --md-sys-color-on-tertiary-fixed: rgb(255 255 255);
+  --md-sys-color-tertiary-fixed-dim: rgb(0 51 49);
+  --md-sys-color-on-tertiary-fixed-variant: rgb(255 255 255);
+  --md-sys-color-surface-dim: rgb(218 219 208);
+  --md-sys-color-surface-bright: rgb(249 250 239);
+  --md-sys-color-surface-container-lowest: rgb(255 255 255);
+  --md-sys-color-surface-container-low: rgb(243 244 233);
+  --md-sys-color-surface-container: rgb(238 239 227);
+  --md-sys-color-surface-container-high: rgb(232 233 222);
+  --md-sys-color-surface-container-highest: rgb(226 227 216);
+}

package/themes/light-mc.css

@@ -0,0 +1,51 @@
+.light-medium-contrast {
+  --md-sys-color-primary: rgb(49 74 18);
+  --md-sys-color-surface-tint: rgb(76 102 43);
+  --md-sys-color-on-primary: rgb(255 255 255);
+  --md-sys-color-primary-container: rgb(97 125 63);
+  --md-sys-color-on-primary-container: rgb(255 255 255);
+  --md-sys-color-secondary: rgb(60 70 47);
+  --md-sys-color-on-secondary: rgb(255 255 255);
+  --md-sys-color-secondary-container: rgb(110 120 94);
+  --md-sys-color-on-secondary-container: rgb(255 255 255);
+  --md-sys-color-tertiary: rgb(26 74 71);
+  --md-sys-color-on-tertiary: rgb(255 255 255);
+  --md-sys-color-tertiary-container: rgb(79 125 121);
+  --md-sys-color-on-tertiary-container: rgb(255 255 255);
+  --md-sys-color-error: rgb(140 0 9);
+  --md-sys-color-on-error: rgb(255 255 255);
+  --md-sys-color-error-container: rgb(218 52 46);
+  --md-sys-color-on-error-container: rgb(255 255 255);
+  --md-sys-color-background: rgb(249 250 239);
+  --md-sys-color-on-background: rgb(26 28 22);
+  --md-sys-color-surface: rgb(249 250 239);
+  --md-sys-color-on-surface: rgb(26 28 22);
+  --md-sys-color-surface-variant: rgb(225 228 213);
+  --md-sys-color-on-surface-variant: rgb(64 68 57);
+  --md-sys-color-outline: rgb(93 97 85);
+  --md-sys-color-outline-variant: rgb(120 124 112);
+  --md-sys-color-shadow: rgb(0 0 0);
+  --md-sys-color-scrim: rgb(0 0 0);
+  --md-sys-color-inverse-surface: rgb(47 49 42);
+  --md-sys-color-inverse-on-surface: rgb(241 242 230);
+  --md-sys-color-inverse-primary: rgb(177 209 138);
+  --md-sys-color-primary-fixed: rgb(97 125 63);
+  --md-sys-color-on-primary-fixed: rgb(255 255 255);
+  --md-sys-color-primary-fixed-dim: rgb(73 100 41);
+  --md-sys-color-on-primary-fixed-variant: rgb(255 255 255);
+  --md-sys-color-secondary-fixed: rgb(110 120 94);
+  --md-sys-color-on-secondary-fixed: rgb(255 255 255);
+  --md-sys-color-secondary-fixed-dim: rgb(85 95 71);
+  --md-sys-color-on-secondary-fixed-variant: rgb(255 255 255);
+  --md-sys-color-tertiary-fixed: rgb(79 125 121);
+  --md-sys-color-on-tertiary-fixed: rgb(255 255 255);
+  --md-sys-color-tertiary-fixed-dim: rgb(54 100 96);
+  --md-sys-color-on-tertiary-fixed-variant: rgb(255 255 255);
+  --md-sys-color-surface-dim: rgb(218 219 208);
+  --md-sys-color-surface-bright: rgb(249 250 239);
+  --md-sys-color-surface-container-lowest: rgb(255 255 255);
+  --md-sys-color-surface-container-low: rgb(243 244 233);
+  --md-sys-color-surface-container: rgb(238 239 227);
+  --md-sys-color-surface-container-high: rgb(232 233 222);
+  --md-sys-color-surface-container-highest: rgb(226 227 216);
+}

package/themes/light.css

@@ -0,0 +1,57 @@
+body {
+  --md-sys-shape-corner-small: 4px;
+  --md-sys-shape-corner-medium: 6px;
+  --md-sys-shape-corner-large: 8px;
+}
+
+.light {
+  --md-sys-color-primary: rgb(76 102 43);
+  --md-sys-color-surface-tint: rgb(76 102 43);
+  --md-sys-color-on-primary: rgb(255 255 255);
+  --md-sys-color-primary-container: rgb(205 237 163);
+  --md-sys-color-on-primary-container: rgb(16 32 0);
+  --md-sys-color-secondary: rgb(88 98 73);
+  --md-sys-color-on-secondary: rgb(255 255 255);
+  --md-sys-color-secondary-container: rgb(220 231 200);
+  --md-sys-color-on-secondary-container: rgb(21 30 11);
+  --md-sys-color-tertiary: rgb(56 102 99);
+  --md-sys-color-on-tertiary: rgb(255 255 255);
+  --md-sys-color-tertiary-container: rgb(188 236 231);
+  --md-sys-color-on-tertiary-container: rgb(0 32 30);
+  --md-sys-color-error: rgb(186 26 26);
+  --md-sys-color-on-error: rgb(255 255 255);
+  --md-sys-color-error-container: rgb(255 218 214);
+  --md-sys-color-on-error-container: rgb(65 0 2);
+  --md-sys-color-background: rgb(249 250 239);
+  --md-sys-color-on-background: rgb(26 28 22);
+  --md-sys-color-surface: rgb(249 250 239);
+  --md-sys-color-on-surface: rgb(26 28 22);
+  --md-sys-color-surface-variant: rgb(225 228 213);
+  --md-sys-color-on-surface-variant: rgb(68 72 61);
+  --md-sys-color-outline: rgb(117 121 108);
+  --md-sys-color-outline-variant: rgb(197 200 186);
+  --md-sys-color-shadow: rgb(0 0 0);
+  --md-sys-color-scrim: rgb(0 0 0);
+  --md-sys-color-inverse-surface: rgb(47 49 42);
+  --md-sys-color-inverse-on-surface: rgb(241 242 230);
+  --md-sys-color-inverse-primary: rgb(177 209 138);
+  --md-sys-color-primary-fixed: rgb(205 237 163);
+  --md-sys-color-on-primary-fixed: rgb(16 32 0);
+  --md-sys-color-primary-fixed-dim: rgb(177 209 138);
+  --md-sys-color-on-primary-fixed-variant: rgb(53 78 22);
+  --md-sys-color-secondary-fixed: rgb(220 231 200);
+  --md-sys-color-on-secondary-fixed: rgb(21 30 11);
+  --md-sys-color-secondary-fixed-dim: rgb(191 203 173);
+  --md-sys-color-on-secondary-fixed-variant: rgb(64 74 51);
+  --md-sys-color-tertiary-fixed: rgb(188 236 231);
+  --md-sys-color-on-tertiary-fixed: rgb(0 32 30);
+  --md-sys-color-tertiary-fixed-dim: rgb(160 208 203);
+  --md-sys-color-on-tertiary-fixed-variant: rgb(31 78 75);
+  --md-sys-color-surface-dim: rgb(218 219 208);
+  --md-sys-color-surface-bright: rgb(249 250 239);
+  --md-sys-color-surface-container-lowest: rgb(255 255 255);
+  --md-sys-color-surface-container-low: rgb(243 244 233);
+  --md-sys-color-surface-container: rgb(238 239 227);
+  --md-sys-color-surface-container-high: rgb(232 233 222);
+  --md-sys-color-surface-container-highest: rgb(226 227 216);
+}

package/themes/md-typescale-styles.css

@@ -0,0 +1,100 @@
+@layer {
+  .md-typescale-display-small,
+  .md-typescale-display-small-prominent {
+    font: var(--md-sys-typescale-display-small-weight, var(--md-ref-typeface-weight-regular, 400))
+      var(--md-sys-typescale-display-small-size, 2.25rem) / var(--md-sys-typescale-display-small-line-height, 2.75rem)
+      var(--md-sys-typescale-display-small-font, var(--md-ref-typeface-brand, Roboto));
+  }
+  .md-typescale-display-medium,
+  .md-typescale-display-medium-prominent {
+    font: var(--md-sys-typescale-display-medium-weight, var(--md-ref-typeface-weight-regular, 400))
+      var(--md-sys-typescale-display-medium-size, 2.8125rem) /
+      var(--md-sys-typescale-display-medium-line-height, 3.25rem)
+      var(--md-sys-typescale-display-medium-font, var(--md-ref-typeface-brand, Roboto));
+  }
+  .md-typescale-display-large,
+  .md-typescale-display-large-prominent {
+    font: var(--md-sys-typescale-display-large-weight, var(--md-ref-typeface-weight-regular, 400))
+      var(--md-sys-typescale-display-large-size, 3.5625rem) / var(--md-sys-typescale-display-large-line-height, 4rem)
+      var(--md-sys-typescale-display-large-font, var(--md-ref-typeface-brand, Roboto));
+  }
+  .md-typescale-headline-small,
+  .md-typescale-headline-small-prominent {
+    font: var(--md-sys-typescale-headline-small-weight, var(--md-ref-typeface-weight-regular, 400))
+      var(--md-sys-typescale-headline-small-size, 1.5rem) / var(--md-sys-typescale-headline-small-line-height, 2rem)
+      var(--md-sys-typescale-headline-small-font, var(--md-ref-typeface-brand, Roboto));
+  }
+  .md-typescale-headline-medium,
+  .md-typescale-headline-medium-prominent {
+    font: var(--md-sys-typescale-headline-medium-weight, var(--md-ref-typeface-weight-regular, 400))
+      var(--md-sys-typescale-headline-medium-size, 1.75rem) /
+      var(--md-sys-typescale-headline-medium-line-height, 2.25rem)
+      var(--md-sys-typescale-headline-medium-font, var(--md-ref-typeface-brand, Roboto));
+  }
+  .md-typescale-headline-large,
+  .md-typescale-headline-large-prominent {
+    font: var(--md-sys-typescale-headline-large-weight, var(--md-ref-typeface-weight-regular, 400))
+      var(--md-sys-typescale-headline-large-size, 2rem) / var(--md-sys-typescale-headline-large-line-height, 2.5rem)
+      var(--md-sys-typescale-headline-large-font, var(--md-ref-typeface-brand, Roboto));
+  }
+  .md-typescale-title-small,
+  .md-typescale-title-small-prominent {
+    font: var(--md-sys-typescale-title-small-weight, var(--md-ref-typeface-weight-medium, 500))
+      var(--md-sys-typescale-title-small-size, 0.875rem) / var(--md-sys-typescale-title-small-line-height, 1.25rem)
+      var(--md-sys-typescale-title-small-font, var(--md-ref-typeface-plain, Roboto));
+  }
+  .md-typescale-title-medium,
+  .md-typescale-title-medium-prominent {
+    font: var(--md-sys-typescale-title-medium-weight, var(--md-ref-typeface-weight-medium, 500))
+      var(--md-sys-typescale-title-medium-size, 1rem) / var(--md-sys-typescale-title-medium-line-height, 1.5rem)
+      var(--md-sys-typescale-title-medium-font, var(--md-ref-typeface-plain, Roboto));
+  }
+  .md-typescale-title-large,
+  .md-typescale-title-large-prominent {
+    font: var(--md-sys-typescale-title-large-weight, var(--md-ref-typeface-weight-regular, 400))
+      var(--md-sys-typescale-title-large-size, 1.375rem) / var(--md-sys-typescale-title-large-line-height, 1.75rem)
+      var(--md-sys-typescale-title-large-font, var(--md-ref-typeface-brand, Roboto));
+  }
+  .md-typescale-body-small,
+  .md-typescale-body-small-prominent {
+    font: var(--md-sys-typescale-body-small-weight, var(--md-ref-typeface-weight-regular, 400))
+      var(--md-sys-typescale-body-small-size, 0.75rem) / var(--md-sys-typescale-body-small-line-height, 1rem)
+      var(--md-sys-typescale-body-small-font, var(--md-ref-typeface-plain, Roboto));
+  }
+  .md-typescale-body-medium,
+  .md-typescale-body-medium-prominent {
+    font: var(--md-sys-typescale-body-medium-weight, var(--md-ref-typeface-weight-regular, 400))
+      var(--md-sys-typescale-body-medium-size, 0.875rem) / var(--md-sys-typescale-body-medium-line-height, 1.25rem)
+      var(--md-sys-typescale-body-medium-font, var(--md-ref-typeface-plain, Roboto));
+  }
+  .md-typescale-body-large,
+  .md-typescale-body-large-prominent {
+    font: var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400))
+      var(--md-sys-typescale-body-large-size, 1rem) / var(--md-sys-typescale-body-large-line-height, 1.5rem)
+      var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto));
+  }
+  .md-typescale-label-small,
+  .md-typescale-label-small-prominent {
+    font: var(--md-sys-typescale-label-small-weight, var(--md-ref-typeface-weight-medium, 500))
+      var(--md-sys-typescale-label-small-size, 0.6875rem) / var(--md-sys-typescale-label-small-line-height, 1rem)
+      var(--md-sys-typescale-label-small-font, var(--md-ref-typeface-plain, Roboto));
+  }
+  .md-typescale-label-medium,
+  .md-typescale-label-medium-prominent {
+    font: var(--md-sys-typescale-label-medium-weight, var(--md-ref-typeface-weight-medium, 500))
+      var(--md-sys-typescale-label-medium-size, 0.75rem) / var(--md-sys-typescale-label-medium-line-height, 1rem)
+      var(--md-sys-typescale-label-medium-font, var(--md-ref-typeface-plain, Roboto));
+  }
+  .md-typescale-label-medium-prominent {
+    font-weight: var(--md-sys-typescale-label-medium-weight-prominent, var(--md-ref-typeface-weight-bold, 700));
+  }
+  .md-typescale-label-large,
+  .md-typescale-label-large-prominent {
+    font: var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500))
+      var(--md-sys-typescale-label-large-size, 0.875rem) / var(--md-sys-typescale-label-large-line-height, 1.25rem)
+      var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, Roboto));
+  }
+  .md-typescale-label-large-prominent {
+    font-weight: var(--md-sys-typescale-label-large-weight-prominent, var(--md-ref-typeface-weight-bold, 700));
+  }
+} /*# sourceMappingURL=md-typescale-styles.css.map */

package/themes/spacing.css

@@ -0,0 +1,13 @@
+:root {
+  --spacing-tiny: 2px;
+  --spacing-small: 4px;
+  --spacing-medium: 8px;
+  --spacing-large: 12px;
+  --spacing-huge: 24px;
+
+  --icon-size-tiny: 14px;
+  --icon-size-small: 18px;
+  --icon-size-medium: 24px;
+  --icon-size-large: 32px;
+  --icon-size-huge: 48px;
+}

package/themes/state-color.css

@@ -0,0 +1,6 @@
+:root {
+  --status-danger-color: var(--md-sys-color-error, rgb(186 26 26));
+  --status-warning-color: #ee8d03;
+  --status-info-color: #398ace;
+  --status-success-color: #35a24a;
+}