@operato/context 2.0.0-alpha.146 → 2.0.0-alpha.149

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

@@ -7,12 +7,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-page-toolbar',
   component: 'ox-context-page-toolbar',
   argTypes: {
-    label: { control: 'string' }
+    label: { control: 'string' },
+    theme: { control: 'select', options: ['light', 'dark'] }
   }
 }
 
@@ -24,79 +26,106 @@ interface Story<T> {
 
 interface ArgTypes {
   label?: string
+  theme?: string
 }
 
-const Template: Story<ArgTypes> = ({ label = '' }: ArgTypes) => html`
-  <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="/themes/material-theme.css" rel="stylesheet" />
+const Template: Story<ArgTypes> = ({ label = '', theme = 'light' }: ArgTypes) => html`
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" 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"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+
+  <style>
+    ${MDTypeScaleStyles.cssText}
+  </style>
 
-  <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1" rel="stylesheet">
-  <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"  rel="stylesheet">
-  <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1" rel="stylesheet">
-  
   <style>
-    body {
-      background-color: white;
+    .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;
     }
 
-    ${CommonHeaderStyles.cssText}
+    ox-buttons-radio {
+      padding: 20px;
+    }
   </style>
 
-  <div style="height:600px;">
+  <script>
+    document.body.classList.add('${theme}')
+  </script>
+
+  <div class="container md-typescale-body-large-prominent">
     <div class="header">
-      <div class="title">
-        ${label}
-      </div>
-
-      <div class="filters">
-        <label>Filter</label><input type="text"></input>
-      </div>
-
-      <ox-context-page-toolbar class="actions" 
-      .tools=${[
-        {
-          position: TOOL_POSITION.FRONT,
-          template: html` <md-icon>download</md-icon> `,
-          context: 'exportable'
-        },
-        {
-          position: TOOL_POSITION.FRONT,
-          template: html` <md-icon>upload</md-icon> `,
-          context: 'importable'
-        },
-        {
-          position: TOOL_POSITION.CENTER,
-          template: html`<ox-page-action-context-bar
-            .actions=${[
-              {
-                title: 'save',
-                action: () => {},
-                icon: 'save'
-              },
-              {
-                title: 'copy',
-                action: () => {},
-                icon: 'content_copy'
-              },
-              {
-                title: 'delete',
-                action: () => {},
-                icon: 'delete',
-                emphasis: {
-                  danger: true
+      <div class="title">${label}</div>
+
+      <div class="filters"><label>Filter</label><input type="text" /></div>
+
+      <ox-context-page-toolbar
+        class="actions"
+        .tools=${[
+          {
+            position: TOOL_POSITION.FRONT,
+            template: html` <md-icon>download</md-icon> `,
+            context: 'exportable'
+          },
+          {
+            position: TOOL_POSITION.FRONT,
+            template: html` <md-icon>upload</md-icon> `,
+            context: 'importable'
+          },
+          {
+            position: TOOL_POSITION.CENTER,
+            template: html`<ox-page-action-context-bar
+              .actions=${[
+                {
+                  title: 'save',
+                  action: () => {},
+                  icon: 'save'
+                },
+                {
+                  title: 'copy',
+                  action: () => {},
+                  icon: 'content_copy'
+                },
+                {
+                  title: 'delete',
+                  action: () => {},
+                  icon: 'delete',
+                  emphasis: {
+                    danger: true
+                  }
                 }
-              }
-            ]}
-          ></ox-page-action-context-bar>`
+              ]}
+            ></ox-page-action-context-bar>`
+          }
+        ]}
+        .context=${{
+          exportable: true,
+          importable: true,
+          toolbar: false
+        }}
         }
-      ]}
-      .context=${{
-        exportable: true,
-        importable: true,
-        toolbar: false
-      }}
-        
-      }> </ox-context-page-toolbar>
+      >
+      </ox-context-page-toolbar>
     </div>
   </div>
 `

package/stories/ox-context-toolbar-complex.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 complex',
   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: black;">
+  <script>
+    document.body.classList.add('${theme}')
+  </script>
+
+  <div class="container md-typescale-body-large-prominent">
     <ox-context-toolbar
       .tools=${[
         {

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

@@ -6,11 +6,14 @@ import { TOOL_POSITION } from '@operato/layout'
 import { sleep } from '@operato/utils'
 
 import { css, html, render, TemplateResult } from 'lit'
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
 
 export default {
   title: 'ox-context-toolbar empty',
   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="display: flex; flex-direction: column; gap: 10px; padding: 10px; background-color: black;">
+  <script>
+    document.body.classList.add('${theme}')
+  </script>
+
+  <div class="container md-typescale-body-large-prominent">
     <ox-context-toolbar
       .tools=${[]}
       .context=${{

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);
+}