@operato/popup 2.0.0-alpha.99 → 2.0.0-beta.4

package/stories/ox-popup.stories.ts

@@ -1,11 +1,15 @@
+import '@material/web/all.js'
 import { html, TemplateResult } from 'lit'
 
 import { OxPopup } from '../src/ox-popup'
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
 
 export default {
   title: 'ContextMenu',
   component: 'ox-popup',
-  argTypes: {}
+  argTypes: {
+    theme: { control: 'select', options: ['light', 'dark'] }
+  }
 }
 
 interface Story<T> {
@@ -14,7 +18,9 @@ interface Story<T> {
   argTypes?: Record<string, unknown>
 }
 
-interface ArgTypes {}
+interface ArgTypes {
+  theme?: 'light' | 'dark'
+}
 
 function popup(e: MouseEvent) {
   const noImage = new URL('/assets/images/no-image.png', import.meta.url).href
@@ -27,20 +33,49 @@ function popup(e: MouseEvent) {
   })
 }
 
-const Template: Story<ArgTypes> = ({}: ArgTypes) =>
-  html`
-    <style>
-      #place {
-        width: 100%;
-        height: 500px;
-        background: lightgreen;
-        text-align: center;
-        line-height: 500px;
-      }
-    </style>
-
-    <div id="place" @click=${(e: MouseEvent) => popup(e)}>Click this to popup image</div>
-  `
+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" />
+
+  <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>
+
+  <style>
+    #place {
+      width: 100%;
+      height: 500px;
+      text-align: center;
+
+      background-color: var(--md-sys-color-primary-container);
+      color: var(--md-sys-color-on-primary-container);
+    }
+  </style>
+
+  <script>
+    document.body.classList.add('${theme}')
+  </script>
+
+  <div id="place" @click=${(e: MouseEvent) => popup(e)} class="md-typescale-display-medium">
+    Click this to popup image
+  </div>
+`
 
 export const Regular = Template.bind({})
 Regular.args = {}

package/stories/ox-prompt-icon.stories.ts

@@ -1,13 +1,16 @@
+import '@material/web/all.js'
 import { html, TemplateResult } from 'lit'
 
 import { OxPrompt } from '../src/ox-prompt'
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
 
 export default {
   title: 'OxPrompt - Icon',
   component: 'ox-prompt',
   argTypes: {
     type: { control: 'select', options: ['success', 'error', 'warning', 'info', 'question'] },
-    debug: { control: 'boolean' }
+    debug: { control: 'boolean' },
+    theme: { control: 'select', options: ['light', 'dark'] }
   }
 }
 
@@ -20,9 +23,15 @@ interface Story<T> {
 interface ArgTypes {
   type: 'success' | 'error' | 'warning' | 'info' | 'question'
   debug: boolean
+  theme?: 'light' | 'dark'
 }
 
-function popup(e: MouseEvent, type: 'success' | 'error' | 'warning' | 'info' | 'question' = 'warning', debug: boolean) {
+function popup(
+  e: MouseEvent,
+  type: 'success' | 'error' | 'warning' | 'info' | 'question' = 'warning',
+  theme: 'light' | 'dark',
+  debug: boolean
+) {
   const noImage = new URL('/assets/images/no-image.png', import.meta.url).href
 
   //@ts-ignore
@@ -37,9 +46,12 @@ function popup(e: MouseEvent, type: 'success' | 'error' | 'warning' | 'info' | '
   })
 }
 
-const Template: Story<ArgTypes> = ({ type, debug }: ArgTypes) => html`
-  <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="/themes/material-theme.css" rel="stylesheet" />
+const Template: Story<ArgTypes> = ({ type, debug, 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"
@@ -54,19 +66,28 @@ const Template: Story<ArgTypes> = ({ type, debug }: ArgTypes) => html`
     rel="stylesheet"
   />
 
-  <script></script>
+  <style>
+    ${MDTypeScaleStyles.cssText}
+  </style>
 
   <style>
     #place {
       width: 100%;
       height: 500px;
-      background: lightgreen;
       text-align: center;
-      line-height: 500px;
+
+      background-color: var(--md-sys-color-primary-container);
+      color: var(--md-sys-color-on-primary-container);
     }
   </style>
 
-  <div id="place" @click=${(e: MouseEvent) => popup(e, type, debug)}>Click this to prompt image</div>
+  <script>
+    document.body.classList.add('${theme}')
+  </script>
+
+  <div id="place" @click=${(e: MouseEvent) => popup(e, type, theme, debug)} class="md-typescale-display-medium">
+    Click this to prompt image
+  </div>
 `
 
 export const Regular = Template.bind({})

package/stories/ox-prompt-normal.stories.ts

@@ -1,11 +1,15 @@
+import '@material/web/all.js'
 import { html, TemplateResult } from 'lit'
 
 import { OxPrompt } from '../src/ox-prompt'
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
 
 export default {
   title: 'OxPrompt - Normal',
   component: 'ox-prompt',
-  argTypes: {}
+  argTypes: {
+    theme: { control: 'select', options: ['light', 'dark'] }
+  }
 }
 
 interface Story<T> {
@@ -14,7 +18,9 @@ interface Story<T> {
   argTypes?: Record<string, unknown>
 }
 
-interface ArgTypes {}
+interface ArgTypes {
+  theme?: 'light' | 'dark'
+}
 
 function popup(e: MouseEvent) {
   const noImage = new URL('/assets/images/no-image.png', import.meta.url).href
@@ -27,9 +33,12 @@ function popup(e: MouseEvent) {
   })
 }
 
-const Template: Story<ArgTypes> = ({}: ArgTypes) => html`
-  <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="/themes/material-theme.css" rel="stylesheet" />
+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" />
+
+  <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"
@@ -44,17 +53,28 @@ const Template: Story<ArgTypes> = ({}: ArgTypes) => html`
     rel="stylesheet"
   />
 
+  <style>
+    ${MDTypeScaleStyles.cssText}
+  </style>
+
   <style>
     #place {
       width: 100%;
       height: 500px;
-      background: lightgreen;
       text-align: center;
-      line-height: 500px;
+
+      background-color: var(--md-sys-color-primary-container);
+      color: var(--md-sys-color-on-primary-container);
     }
   </style>
 
-  <div id="place" @click=${(e: MouseEvent) => popup(e)}>Click this to prompt image</div>
+  <script>
+    document.body.classList.add('${theme}')
+  </script>
+
+  <div id="place" @click=${(e: MouseEvent) => popup(e)} class="md-typescale-display-medium">
+    Click this to prompt image
+  </div>
 `
 
 export const Regular = Template.bind({})

package/stories/ox-prompt.stories.ts

@@ -1,11 +1,15 @@
 import { html, TemplateResult } from 'lit'
 
 import { OxPrompt } from '../src/ox-prompt'
+import { ifDefined } from 'lit/directives/if-defined.js'
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
 
 export default {
   title: 'OxPrompt',
   component: 'ox-prompt',
-  argTypes: {}
+  argTypes: {
+    theme: { control: 'select', options: ['light', 'dark'] }
+  }
 }
 
 interface Story<T> {
@@ -14,12 +18,14 @@ interface Story<T> {
   argTypes?: Record<string, unknown>
 }
 
-interface ArgTypes {}
+interface ArgTypes {
+  theme?: 'light' | 'dark'
+}
 
-function popup(e: MouseEvent) {
+async function popup(e: MouseEvent) {
   const noImage = new URL('/assets/images/no-image.png', import.meta.url).href
 
-  OxPrompt.open({
+  await OxPrompt.open({
     type: 'info',
     title: 'title',
     text: 'Are you sure ?',
@@ -30,9 +36,12 @@ function popup(e: MouseEvent) {
   })
 }
 
-const Template: Story<ArgTypes> = ({}: ArgTypes) => html`
-  <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="/themes/material-theme.css" rel="stylesheet" />
+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" />
+
+  <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"
@@ -47,17 +56,28 @@ const Template: Story<ArgTypes> = ({}: ArgTypes) => html`
     rel="stylesheet"
   />
 
+  <style>
+    ${MDTypeScaleStyles.cssText}
+  </style>
+
   <style>
     #place {
       width: 100%;
       height: 500px;
-      background: lightgreen;
       text-align: center;
-      line-height: 500px;
+
+      background-color: var(--md-sys-color-primary-container);
+      color: var(--md-sys-color-on-primary-container);
     }
   </style>
 
-  <div id="place" @click=${(e: MouseEvent) => popup(e)}>Click this to prompt image</div>
+  <script>
+    document.body.classList.add('${theme}')
+  </script>
+
+  <div id="place" @click=${(e: MouseEvent) => popup(e)} class="md-typescale-display-medium">
+    Click this to prompt image
+  </div>
 `
 
 export const Regular = Template.bind({})

package/themes/dark-hc.css

@@ -0,0 +1,151 @@
+.dark-high-contrast {
+  --md-sys-color-primary: rgb(252 250 255);
+  --md-sys-color-surface-tint: rgb(178 197 255);
+  --md-sys-color-on-primary: rgb(0 0 0);
+  --md-sys-color-primary-container: rgb(184 201 255);
+  --md-sys-color-on-primary-container: rgb(0 0 0);
+  --md-sys-color-secondary: rgb(248 251 255);
+  --md-sys-color-on-secondary: rgb(0 0 0);
+  --md-sys-color-secondary-container: rgb(147 211 247);
+  --md-sys-color-on-secondary-container: rgb(0 0 0);
+  --md-sys-color-tertiary: rgb(238 255 242);
+  --md-sys-color-on-tertiary: rgb(0 0 0);
+  --md-sys-color-tertiary-container: rgb(148 218 179);
+  --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 185 180);
+  --md-sys-color-on-error-container: rgb(0 0 0);
+  --md-sys-color-background: rgb(18 19 24);
+  --md-sys-color-on-background: rgb(227 226 233);
+  --md-sys-color-surface: rgb(18 19 24);
+  --md-sys-color-on-surface: rgb(255 255 255);
+  --md-sys-color-surface-variant: rgb(69 70 79);
+  --md-sys-color-on-surface-variant: rgb(252 250 255);
+  --md-sys-color-outline: rgb(201 202 212);
+  --md-sys-color-outline-variant: rgb(201 202 212);
+  --md-sys-color-shadow: rgb(0 0 0);
+  --md-sys-color-scrim: rgb(0 0 0);
+  --md-sys-color-inverse-surface: rgb(227 226 233);
+  --md-sys-color-inverse-on-surface: rgb(0 0 0);
+  --md-sys-color-inverse-primary: rgb(16 39 90);
+  --md-sys-color-primary-fixed: rgb(224 230 255);
+  --md-sys-color-on-primary-fixed: rgb(0 0 0);
+  --md-sys-color-primary-fixed-dim: rgb(184 201 255);
+  --md-sys-color-on-primary-fixed-variant: rgb(0 19 61);
+  --md-sys-color-secondary-fixed: rgb(205 235 255);
+  --md-sys-color-on-secondary-fixed: rgb(0 0 0);
+  --md-sys-color-secondary-fixed-dim: rgb(147 211 247);
+  --md-sys-color-on-secondary-fixed-variant: rgb(0 25 36);
+  --md-sys-color-tertiary-fixed: rgb(175 246 206);
+  --md-sys-color-on-tertiary-fixed: rgb(0 0 0);
+  --md-sys-color-tertiary-fixed-dim: rgb(148 218 179);
+  --md-sys-color-on-tertiary-fixed-variant: rgb(0 27 14);
+  --md-sys-color-surface-dim: rgb(18 19 24);
+  --md-sys-color-surface-bright: rgb(56 57 63);
+  --md-sys-color-surface-container-lowest: rgb(13 14 19);
+  --md-sys-color-surface-container-low: rgb(26 27 33);
+  --md-sys-color-surface-container: rgb(30 31 37);
+  --md-sys-color-surface-container-high: rgb(41 42 47);
+  --md-sys-color-surface-container-highest: rgb(51 52 58);
+
+  /* primary palette */
+  --md-ref-palette-primary0:#000000;
+  --md-ref-palette-primary5:#000E32;
+  --md-ref-palette-primary10:#001848;
+  --md-ref-palette-primary15:#00215E;
+  --md-ref-palette-primary20:#002B74;
+  --md-ref-palette-primary25:#002B74;
+  --md-ref-palette-primary30:#0040A2;
+  --md-ref-palette-primary35:#002B74;
+  --md-ref-palette-primary40:#1957CA;
+  --md-ref-palette-primary50:#3E71E5;
+  --md-ref-palette-primary60:#5C8BFF;
+  --md-ref-palette-primary70:#89A9FF;
+  --md-ref-palette-primary80:#B2C5FF;
+  --md-ref-palette-primary90:#DAE2FF;
+  --md-ref-palette-primary95:#EEF0FF;
+  --md-ref-palette-primary98:#FAF8FF;
+  --md-ref-palette-primary99:#FEFBFF;
+  --md-ref-palette-primary100:#FFFFFF;
+
+  /* secondary palette */
+  --md-ref-palette-secondary0:#000000;
+  --md-ref-palette-secondary5:#00131D;
+  --md-ref-palette-secondary10:#001E2C;
+  --md-ref-palette-secondary15:#00293A;
+  --md-ref-palette-secondary20:#003549;
+  --md-ref-palette-secondary25:#004058;
+  --md-ref-palette-secondary30:#004C68;
+  --md-ref-palette-secondary35:#005978;
+  --md-ref-palette-secondary40:#006689;
+  --md-ref-palette-secondary50:#0080AC;
+  --md-ref-palette-secondary60:#009BCF;
+  --md-ref-palette-secondary70:#00B8F4;
+  --md-ref-palette-secondary80:#79D1FF;
+  --md-ref-palette-secondary90:#C3E8FF;
+  --md-ref-palette-secondary95:#E3F3FF;
+  --md-ref-palette-secondary98:#F5FAFF;
+  --md-ref-palette-secondary99:#FBFCFF;
+  --md-ref-palette-secondary100:#FFFFFF;
+
+  /* tertiary palette */
+  --md-ref-palette-tertiary0:#000000;
+  --md-ref-palette-tertiary5:#00150A;
+  --md-ref-palette-tertiary10:#002113;
+  --md-ref-palette-tertiary15:#002C1B;
+  --md-ref-palette-tertiary20:#003823;
+  --md-ref-palette-tertiary25:#00452B;
+  --md-ref-palette-tertiary30:#005234;
+  --md-ref-palette-tertiary35:#005F3E;
+  --md-ref-palette-tertiary40:#006C47;
+  --md-ref-palette-tertiary50:#00885A;
+  --md-ref-palette-tertiary60:#31A372;
+  --md-ref-palette-tertiary70:#51BF8B;
+  --md-ref-palette-tertiary80:#6EDBA5;
+  --md-ref-palette-tertiary90:#A2F4C7;
+  --md-ref-palette-tertiary95:#BFFFD9;
+  --md-ref-palette-tertiary98:#E8FFEF;
+  --md-ref-palette-tertiary99:#F4FFF5;
+  --md-ref-palette-tertiary100:#FFFFFF;
+
+  /* error palette */
+  --md-ref-palette-error0:#000000;
+  --md-ref-palette-error5:#2d0102;
+  --md-ref-palette-error10:#410304;
+  --md-ref-palette-error15:#540507;
+  --md-ref-palette-error20:#68070a;
+  --md-ref-palette-error25:#7d0b0e;
+  --md-ref-palette-error30:#930f14;
+  --md-ref-palette-error35:#a91319;
+  --md-ref-palette-error40:#bc1620;
+  --md-ref-palette-error50:#e03236;
+  --md-ref-palette-error60:#ff5450;
+  --md-ref-palette-error70:#ff8982;
+  --md-ref-palette-error80:#ffb3ad;
+  --md-ref-palette-error90:#ffdad7;
+  --md-ref-palette-error95:#ffedeb;
+  --md-ref-palette-error98:#fff8f7;
+  --md-ref-palette-error99:#fffbff;
+  --md-ref-palette-error100:#FFFFFF;
+
+  /* neutral palette */
+  --md-ref-palette-neutral0:#000000;
+  --md-ref-palette-neutral5:#111111;
+  --md-ref-palette-neutral10:#1C1C1C;
+  --md-ref-palette-neutral15:#262626;
+  --md-ref-palette-neutral20:#313131;
+  --md-ref-palette-neutral25:#3C3C3C;
+  --md-ref-palette-neutral30:#474747;
+  --md-ref-palette-neutral35:#535353;
+  --md-ref-palette-neutral40:#5F5F5F;
+  --md-ref-palette-neutral50:#787878;
+  --md-ref-palette-neutral60:#929292;
+  --md-ref-palette-neutral70:#ACACAC;
+  --md-ref-palette-neutral80:#C8C8C8;
+  --md-ref-palette-neutral90:#E4E4E4;
+  --md-ref-palette-neutral95:#F0F0F0;
+  --md-ref-palette-neutral98:#F9F9F9;
+  --md-ref-palette-neutral99:#FEFEFE;
+  --md-ref-palette-neutral100:#FFFFFF;
+}

package/themes/dark-mc.css

@@ -0,0 +1,151 @@
+.dark-medium-contrast {
+  --md-sys-color-primary: rgb(184 201 255);
+  --md-sys-color-surface-tint: rgb(178 197 255);
+  --md-sys-color-on-primary: rgb(0 19 61);
+  --md-sys-color-primary-container: rgb(124 143 200);
+  --md-sys-color-on-primary-container: rgb(0 0 0);
+  --md-sys-color-secondary: rgb(147 211 247);
+  --md-sys-color-on-secondary: rgb(0 25 36);
+  --md-sys-color-secondary-container: rgb(88 152 186);
+  --md-sys-color-on-secondary-container: rgb(0 0 0);
+  --md-sys-color-tertiary: #cffce3;
+  --md-sys-color-on-tertiary: rgb(0 27 14);
+  --md-sys-color-tertiary-container: #005234;
+  --md-sys-color-on-tertiary-container: #cffce3;
+  --md-sys-color-error: #fbafa9;
+  --md-sys-color-on-error: #fe594e;
+  --md-sys-color-error-container: #fe594e;
+  --md-sys-color-on-error-container: #fbafa9;
+  --md-sys-color-background: rgb(18 19 24);
+  --md-sys-color-on-background: rgb(227 226 233);
+  --md-sys-color-surface: rgb(18 19 24);
+  --md-sys-color-on-surface: rgb(252 250 255);
+  --md-sys-color-surface-variant: rgb(69 70 79);
+  --md-sys-color-on-surface-variant: rgb(201 202 212);
+  --md-sys-color-outline: rgb(161 162 172);
+  --md-sys-color-outline-variant: rgb(129 131 140);
+  --md-sys-color-shadow: rgb(0 0 0);
+  --md-sys-color-scrim: rgb(0 0 0);
+  --md-sys-color-inverse-surface: rgb(227 226 233);
+  --md-sys-color-inverse-on-surface: rgb(41 42 47);
+  --md-sys-color-inverse-primary: rgb(50 70 122);
+  --md-sys-color-primary-fixed: rgb(218 226 255);
+  --md-sys-color-on-primary-fixed: rgb(0 15 51);
+  --md-sys-color-primary-fixed-dim: rgb(178 197 255);
+  --md-sys-color-on-primary-fixed-variant: rgb(31 52 102);
+  --md-sys-color-secondary-fixed: rgb(195 232 255);
+  --md-sys-color-on-secondary-fixed: rgb(0 19 29);
+  --md-sys-color-secondary-fixed-dim: rgb(143 207 243);
+  --md-sys-color-on-secondary-fixed-variant: rgb(0 59 81);
+  --md-sys-color-tertiary-fixed: #c7e6d5;
+  --md-sys-color-on-tertiary-fixed: rgb(0 21 10);
+  --md-sys-color-tertiary-fixed-dim: #c7e6d5;
+  --md-sys-color-on-tertiary-fixed-variant: rgb(0 63 39);
+  --md-sys-color-surface-dim: rgb(18 19 24);
+  --md-sys-color-surface-bright: rgb(56 57 63);
+  --md-sys-color-surface-container-lowest: rgb(13 14 19);
+  --md-sys-color-surface-container-low: rgb(26 27 33);
+  --md-sys-color-surface-container: rgb(30 31 37);
+  --md-sys-color-surface-container-high: rgb(41 42 47);
+  --md-sys-color-surface-container-highest: rgb(51 52 58);
+
+  /* primary palette */
+  --md-ref-palette-primary0:#000000;
+  --md-ref-palette-primary5:#000E32;
+  --md-ref-palette-primary10:#001848;
+  --md-ref-palette-primary15:#00215E;
+  --md-ref-palette-primary20:#002B74;
+  --md-ref-palette-primary25:#002B74;
+  --md-ref-palette-primary30:#0040A2;
+  --md-ref-palette-primary35:#002B74;
+  --md-ref-palette-primary40:#1957CA;
+  --md-ref-palette-primary50:#3E71E5;
+  --md-ref-palette-primary60:#5C8BFF;
+  --md-ref-palette-primary70:#89A9FF;
+  --md-ref-palette-primary80:#B2C5FF;
+  --md-ref-palette-primary90:#DAE2FF;
+  --md-ref-palette-primary95:#EEF0FF;
+  --md-ref-palette-primary98:#FAF8FF;
+  --md-ref-palette-primary99:#FEFBFF;
+  --md-ref-palette-primary100:#FFFFFF;
+
+  /* secondary palette */
+  --md-ref-palette-secondary0:#000000;
+  --md-ref-palette-secondary5:#00131D;
+  --md-ref-palette-secondary10:#001E2C;
+  --md-ref-palette-secondary15:#00293A;
+  --md-ref-palette-secondary20:#003549;
+  --md-ref-palette-secondary25:#004058;
+  --md-ref-palette-secondary30:#004C68;
+  --md-ref-palette-secondary35:#005978;
+  --md-ref-palette-secondary40:#006689;
+  --md-ref-palette-secondary50:#0080AC;
+  --md-ref-palette-secondary60:#009BCF;
+  --md-ref-palette-secondary70:#00B8F4;
+  --md-ref-palette-secondary80:#79D1FF;
+  --md-ref-palette-secondary90:#C3E8FF;
+  --md-ref-palette-secondary95:#E3F3FF;
+  --md-ref-palette-secondary98:#F5FAFF;
+  --md-ref-palette-secondary99:#FBFCFF;
+  --md-ref-palette-secondary100:#FFFFFF;
+
+  /* tertiary palette */
+  --md-ref-palette-tertiary0:#000000;
+  --md-ref-palette-tertiary5:#00150A;
+  --md-ref-palette-tertiary10:#002113;
+  --md-ref-palette-tertiary15:#002C1B;
+  --md-ref-palette-tertiary20:#003823;
+  --md-ref-palette-tertiary25:#00452B;
+  --md-ref-palette-tertiary30:#005234;
+  --md-ref-palette-tertiary35:#005F3E;
+  --md-ref-palette-tertiary40:#006C47;
+  --md-ref-palette-tertiary50:#00885A;
+  --md-ref-palette-tertiary60:#31A372;
+  --md-ref-palette-tertiary70:#51BF8B;
+  --md-ref-palette-tertiary80:#6EDBA5;
+  --md-ref-palette-tertiary90:#A2F4C7;
+  --md-ref-palette-tertiary95:#BFFFD9;
+  --md-ref-palette-tertiary98:#E8FFEF;
+  --md-ref-palette-tertiary99:#F4FFF5;
+  --md-ref-palette-tertiary100:#FFFFFF;
+
+  /* error palette */
+  --md-ref-palette-error0:#000000;
+  --md-ref-palette-error5:#2d0102;
+  --md-ref-palette-error10:#410304;
+  --md-ref-palette-error15:#540507;
+  --md-ref-palette-error20:#68070a;
+  --md-ref-palette-error25:#7d0b0e;
+  --md-ref-palette-error30:#930f14;
+  --md-ref-palette-error35:#a91319;
+  --md-ref-palette-error40:#bc1620;
+  --md-ref-palette-error50:#e03236;
+  --md-ref-palette-error60:#ff5450;
+  --md-ref-palette-error70:#ff8982;
+  --md-ref-palette-error80:#ffb3ad;
+  --md-ref-palette-error90:#ffdad7;
+  --md-ref-palette-error95:#ffedeb;
+  --md-ref-palette-error98:#fff8f7;
+  --md-ref-palette-error99:#fffbff;
+  --md-ref-palette-error100:#FFFFFF;
+
+  /* neutral palette */
+  --md-ref-palette-neutral0:#000000;
+  --md-ref-palette-neutral5:#111111;
+  --md-ref-palette-neutral10:#1C1C1C;
+  --md-ref-palette-neutral15:#262626;
+  --md-ref-palette-neutral20:#313131;
+  --md-ref-palette-neutral25:#3C3C3C;
+  --md-ref-palette-neutral30:#474747;
+  --md-ref-palette-neutral35:#535353;
+  --md-ref-palette-neutral40:#5F5F5F;
+  --md-ref-palette-neutral50:#787878;
+  --md-ref-palette-neutral60:#929292;
+  --md-ref-palette-neutral70:#ACACAC;
+  --md-ref-palette-neutral80:#C8C8C8;
+  --md-ref-palette-neutral90:#E4E4E4;
+  --md-ref-palette-neutral95:#F0F0F0;
+  --md-ref-palette-neutral98:#F9F9F9;
+  --md-ref-palette-neutral99:#FEFEFE;
+  --md-ref-palette-neutral100:#FFFFFF;
+}