myshell-react-lib 0.1.0

package/src/styles/design-dark.scss

@@ -0,0 +1,330 @@
+@import './tokens.scss';
+
+@layer base {
+  .dark {
+    .md-viewer code {
+      background-color: #27282c !important;
+      font-size: 14px !important;
+      color: var(--white);
+    }
+    .page-view .md-viewer pre {
+      padding: 12px;
+      background-color: #27282c !important;
+      color: var(--white);
+      code {
+        background-color: #27282c !important;
+        color: var(--white);
+      }
+    }
+
+    //utility-moss
+    --utility-moss-50: var(--moss-950);
+    --utility-moss-100: var(--moss-900);
+    --utility-moss-200: var(--moss-800);
+    --utility-moss-300: var(--moss-700);
+    --utility-moss-400: var(--moss-600);
+    --utility-moss-500: var(--moss-500);
+    --utility-moss-600: var(--moss-400);
+    --utility-moss-700: var(--moss-300);
+
+    //utility-teal
+    --utility-teal-50: var(--teal-950);
+    --utility-teal-100: var(--teal-900);
+    --utility-teal-200: var(--teal-800);
+    --utility-teal-300: var(--teal-700);
+    --utility-teal-400: var(--teal-600);
+    --utility-teal-500: var(--teal-500);
+    --utility-teal-600: var(--teal-400);
+    --utility-teal-700: var(--teal-300);
+
+    //utility-cyan
+    --utility-cyan-50: var(--cyan-950);
+    --utility-cyan-100: var(--cyan-900);
+    --utility-cyan-200: var(--cyan-800);
+    --utility-cyan-300: var(--cyan-700);
+    --utility-cyan-400: var(--cyan-600);
+    --utility-cyan-500: var(--cyan-500);
+    --utility-cyan-600: var(--cyan-400);
+    --utility-cyan-700: var(--cyan-300);
+
+    //utility-cyan
+    --utility-cyan-50: var(--cyan-950);
+    --utility-cyan-100: var(--cyan-900);
+    --utility-cyan-200: var(--cyan-800);
+    --utility-cyan-300: var(--cyan-700);
+    --utility-cyan-400: var(--cyan-600);
+    --utility-cyan-500: var(--cyan-500);
+    --utility-cyan-600: var(--cyan-400);
+    --utility-cyan-700: var(--cyan-300);
+
+    //utility-sky-blue
+    --utility-sky-blue-50: var(--sky-blue-950);
+    --utility-sky-blue-100: var(--sky-blue-900);
+    --utility-sky-blue-200: var(--sky-blue-800);
+    --utility-sky-blue-300: var(--sky-blue-700);
+    --utility-sky-blue-400: var(--sky-blue-600);
+    --utility-sky-blue-500: var(--sky-blue-500);
+    --utility-sky-blue-600: var(--sky-blue-400);
+    --utility-sky-blue-700: var(--sky-blue-300);
+
+    //utility-indigo
+    --utility-indigo-50: var(--indigo-950);
+    --utility-indigo-100: var(--indigo-900);
+    --utility-indigo-200: var(--indigo-800);
+    --utility-indigo-300: var(--indigo-700);
+    --utility-indigo-400: var(--indigo-600);
+    --utility-indigo-500: var(--indigo-500);
+    --utility-indigo-600: var(--indigo-400);
+    --utility-indigo-700: var(--indigo-300);
+
+    //utility-purple
+    --utility-purple-50: var(--purple-950);
+    --utility-purple-100: var(--purple-900);
+    --utility-purple-200: var(--purple-800);
+    --utility-purple-300: var(--purple-700);
+    --utility-purple-400: var(--purple-600);
+    --utility-purple-500: var(--purple-500);
+    --utility-purple-600: var(--purple-400);
+    --utility-purple-700: var(--purple-300);
+
+    //utility-pink
+    --utility-pink-50: var(--pink-950);
+    --utility-pink-100: var(--pink-900);
+    --utility-pink-200: var(--pink-800);
+    --utility-pink-300: var(--pink-700);
+    --utility-pink-400: var(--pink-600);
+    --utility-pink-500: var(--pink-500);
+    --utility-pink-600: var(--pink-400);
+    --utility-pink-700: var(--pink-300);
+
+    //utility-rose
+    --utility-rose-50: var(--rose-950);
+    --utility-rose-100: var(--rose-900);
+    --utility-rose-200: var(--rose-800);
+    --utility-rose-300: var(--rose-700);
+    --utility-rose-400: var(--rose-600);
+    --utility-rose-500: var(--rose-500);
+    --utility-rose-600: var(--rose-400);
+    --utility-rose-700: var(--rose-300);
+
+    //utility-orange
+    --utility-orange-50: var(--orange-950);
+    --utility-orange-100: var(--orange-900);
+    --utility-orange-200: var(--orange-800);
+    --utility-orange-300: var(--orange-700);
+    --utility-orange-400: var(--orange-600);
+    --utility-orange-500: var(--orange-500);
+    --utility-orange-600: var(--orange-400);
+    --utility-orange-700: var(--orange-300);
+
+    //utility-amber
+    --utility-amber-50: var(--amber-950);
+    --utility-amber-100: var(--amber-900);
+    --utility-amber-200: var(--amber-800);
+    --utility-amber-300: var(--amber-700);
+    --utility-amber-400: var(--amber-600);
+    --utility-amber-500: var(--amber-500);
+    --utility-amber-600: var(--amber-400);
+    --utility-amber-700: var(--amber-300);
+
+    // text
+    --text: var(--white);
+    --text-subtle: var(--neutral-dark-85);
+    --text-subtler: var(--neutral-dark-60);
+    --text-subtlest: var(--neutral-dark-40);
+    --text-disabled: var(--neutral-dark-30);
+    --text-inverse: var(--neutral-10);
+    --text-static: var(--white);
+    --text-static-black: var(--neutral-10);
+    --text-brand: var(--blue-40);
+    --text-critical: var(--red-50);
+    --text-critical-bolder: var(--red-70);
+    --text-warning: var(--yellow-40);
+    --text-warning-bolder: var(--yellow-70);
+    --text-success-default: var(--green-25);
+    --text-success-bolder: var(--green-70);
+
+    // icon
+    --icon: var(--neutral-dark-85);
+    --icon-subtle: var(--neutral-dark-60);
+    --icon-subtlest: var(--neutral-dark-40);
+    --icon-disabled: var(--neutral-dark-30);
+    --icon-inverse: var(--neutral-30);
+    --icon-static: var(--white);
+    --icon-static-black: var(--neutral-30);
+    --icon-brand: var(--blue-40);
+    --icon-critical: var(--red-50);
+    --icon-warning: var(--yellow-40);
+    --icon-success: var(--green-25);
+
+    // surface
+    --surface-default: var(--neutral-dark-special);
+    --surface-subtle: var(--neutral-dark-special-5);
+    --surface-hovered: var(--neutral-dark-special-10);
+    --surface-pressed: var(--neutral-dark-special-20);
+    --surface-disabled: var(--neutral-dark-special-5);
+    --surface-search-field: var(--neutral-dark-special-5);
+    --surface-inverse: var(--white);
+    --surface-static: var(--white);
+    --surface-static-black: var(--neutral);
+    --surface-none: var(--none);
+    --surface-accent-green-subtlest: var(--green-dark-10);
+    --surface-accent-green-subtler: var(--green-dark-20);
+    --surface-accent-green-subtle: var(--green-dark-30);
+    --surface-accent-green-bolder: var(--green-25);
+    --surface-accent-aqua-subtlest: var(--aqua-dark-10);
+    --surface-accent-aqua-subtler: var(--aqua-dark-20);
+    --surface-accent-aqua-subtle: var(--aqua-dark-30);
+    --surface-accent-aqua-bolder: var(--aqua-25);
+    --surface-accent-blue-subtlest: var(--blue-dark-10);
+    --surface-accent-blue-subtler: var(--blue-dark-20);
+    --surface-accent-blue-subtle: var(--blue-dark-30);
+    --surface-accent-blue-bolder: var(--blue-15);
+    --surface-accent-yellow-subtlest: var(--yellow-dark-10);
+    --surface-accent-yellow-subtler: var(--yellow-dark-20);
+    --surface-accent-yellow-subtle: var(--yellow-dark-30);
+    --surface-accent-yellow-bolder: var(--yellow-15);
+    --surface-accent-red-subtlest: var(--red-dark-10);
+    --surface-accent-red-subtler: var(--red-dark-20);
+    --surface-accent-red-subtle: var(--red-dark-30);
+    --surface-accent-red-bolder: var(--red-25);
+    --surface-accent-gray-subtlest: var(--neutral-dark-20);
+    --surface-accent-gray-subtler: var(--neutral-dark-25);
+    --surface-accent-gray-subtle: var(--neutral-dark-30);
+    --surface-accent-gray-bolder: var(--neutral-dark-40);
+    --surface-primary-default: var(--blue-40);
+    --surface-primary-hovered: var(--blue-20);
+    --surface-primary-pressed: var(--blue-10);
+    --surface-primary-subtle-default: var(--blue-dark-30);
+    --surface-primary-subtle-hovered: var(--blue-dark-40);
+    --surface-primary-subtle-pressed: var(--blue-dark-50);
+    --surface-container-default: var(--neutral-dark);
+    --surface-container-hovered: var(--neutral-dark-10);
+    --surface-container-pressed: var(--neutral-dark-15);
+    --surface-container-selected-default: var(--neutral-dark-special-10);
+    --surface-container-selected-hovered: var(--neutral-dark-special-30);
+    --surface-container-selected-pressed: var(--neutral-dark-special-40);
+    --surface-container-special-default: var(--neutral-dark-special-20);
+    --surface-container-special-hovered: var(--neutral-dark-special-30);
+    --surface-container-special-subtle: var(--neutral-dark-special-5);
+    --surface-warning-default: var(--yellow-30);
+    --surface-warning-hovered: var(--yellow-20);
+    --surface-warning-pressed: var(--yellow-10);
+    --surface-warning-subtle-default: var(--yellow-dark-10);
+    --surface-warning-subtle-hovered: var(--yellow-dark-20);
+    --surface-warning-subtle-pressed: var(--yellow-dark-30);
+    --surface-success-default: var(--green-40);
+    --surface-success-hovered: var(--green-30);
+    --surface-success-pressed: var(--green-20);
+    --surface-success-subtle-default: var(--green-dark-10);
+    --surface-success-subtle-hovered: var(--green-dark-20);
+    --surface-success-subtle-pressed: var(--green-dark-30);
+    --surface-critical-default: var(--red-40);
+    --surface-critical-hovered: var(--red-20);
+    --surface-critical-pressed: var(--red-10);
+    --surface-critical-subtle-default: var(--red-dark-10);
+    --surface-critical-subtle-hovered: var(--red-dark-20);
+    --surface-critical-subtle-pressed: var(--red-dark-30);
+    --surface-info-default: var(--aqua-40);
+    --surface-info-hovered: var(--aqua-30);
+    --surface-info-pressed: var(--aqua-20);
+    --surface-info-subtle-default: var(--aqua-dark-10);
+    --surface-info-subtle-hovered: var(--aqua-dark-20);
+    --surface-info-subtle-pressed: var(--aqua-dark-30);
+    --surface-lemon-bold: var(--lemon-80);
+    --surface-lemon-default: var(--lemon-50);
+    --surface-lemon-subtle: var(--lemon-20);
+    --surface-lemon-subtlest: var(--lemon);
+    --alpha-facetime-white: var(--alpha-black-20);
+    --alpha-facetime-black: var(--alpha-white-20);
+    --alpha-facetime-static: var(--alpha-black-20);
+    --alpha-mask-desktop: var(--alpha-black-75);
+    --alpha-mask-mobile: var(--alpha-black-75);
+
+    --alpha-1: var(--alpha-black-1);
+    --alpha-3: var(--alpha-black-3);
+    --alpha-5: var(--alpha-black-5);
+    --alpha-8: var(--alpha-black-8);
+    --alpha-10: var(--alpha-black-10);
+    --alpha-20: var(--alpha-black-20);
+    --alpha-30: var(--alpha-black-30);
+    --alpha-40: var(--alpha-black-40);
+    --alpha-50: var(--alpha-black-50);
+    --alpha-60: var(--alpha-black-60);
+    --alpha-70: var(--alpha-black-70);
+    --alpha-80: var(--alpha-black-80);
+    --alpha-90: var(--alpha-black-90);
+    --alpha-100: var(--alpha-black-100);
+
+    --alpha-1-black: var(--alpha-white-1);
+    --alpha-3-black: var(--alpha-white-3);
+    --alpha-5-black: var(--alpha-white-5);
+    --alpha-8-black: var(--alpha-white-8);
+    --alpha-10-black: var(--alpha-white-10);
+    --alpha-20-black: var(--alpha-white-20);
+    --alpha-30-black: var(--alpha-white-30);
+    --alpha-40-black: var(--alpha-white-40);
+    --alpha-50-black: var(--alpha-white-50);
+    --alpha-60-black: var(--alpha-white-60);
+    --alpha-70-black: var(--alpha-white-70);
+    --alpha-80-black: var(--alpha-white-80);
+    --alpha-90-black: var(--alpha-white-90);
+    --alpha-100-black: var(--alpha-white-100);
+
+    --white-1: var(--alpha-black-1);
+    --white-3: var(--alpha-black-3);
+    --white-5: var(--alpha-black-5);
+    --white-8: var(--alpha-black-8);
+    --white-10: var(--alpha-black-10);
+    --white-20: var(--alpha-black-20);
+    --white-30: var(--alpha-black-30);
+    --white-40: var(--alpha-black-40);
+    --white-50: var(--alpha-black-50);
+    --white-60: var(--alpha-black-60);
+    --white-70: var(--alpha-black-70);
+    --white-80: var(--alpha-black-80);
+    --white-90: var(--alpha-black-90);
+    --white-100: var(--alpha-black-100);
+    --black-1: var(--alpha-white-1);
+    --black-3: var(--alpha-white-3);
+    --black-5: var(--alpha-white-5);
+    --black-8: var(--alpha-white-8);
+    --black-10: var(--alpha-white-10);
+    --black-20: var(--alpha-white-20);
+    --black-30: var(--alpha-white-30);
+    --black-40: var(--alpha-white-40);
+    --black-50: var(--alpha-white-50);
+    --black-60: var(--alpha-white-60);
+    --black-70: var(--alpha-white-70);
+    --black-80: var(--alpha-white-80);
+    --black-90: var(--alpha-white-90);
+    --black-100: var(--alpha-white-100);
+
+    // border
+    --border: var(--neutral-dark-15);
+    --border-subtle: var(--neutral-dark-25);
+    --border-hovered: var(--neutral-dark-25);
+    --border-pressed: var(--neutral-dark-30);
+    --border-depressed: var(--neutral-dark-40);
+    --border-critical: var(--red-50);
+    --border-success: var(--green-40);
+    --border-brand: var(--blue-40);
+    --border-opaque: var(--alpha-white-5);
+    --border-warning: var(--yellow-10);
+    --border-warning-subtle: var(--yellow-35);
+
+    // shadow
+    --shadow-background-default: var(--alpha-white-5);
+    --shadow-background-bolder: var(--alpha-white-3);
+    --shadow-modal-default: var(--alpha-white-1);
+    --shadow-modal-bolder: var(--alpha-white-1);
+    --shadow-button-basic: var(--alpha-white-5);
+    --shadow-button-primary-1: var(--alpha-white-8);
+    --shadow-button-primary-2: var(--alpha-white-20);
+    --shadow-button-pressed: var(--alpha-white-10);
+
+    // focus-ring
+    --focus-ring-brand: var(--status-04-70);
+    --focus-ring-error: var(--red-55);
+  }
+}

package/src/styles/design-light.scss

@@ -0,0 +1,345 @@
+@import './tokens.scss';
+
+@layer base {
+  :root {
+    
+
+    //utility
+
+    //utility-moss
+    --utility-moss-50: var(--moss-50);
+    --utility-moss-100: var(--moss-100);
+    --utility-moss-200: var(--moss-200);
+    --utility-moss-300: var(--moss-300);
+    --utility-moss-400: var(--moss-400);
+    --utility-moss-500: var(--moss-500);
+    --utility-moss-600: var(--moss-600);
+    --utility-moss-700: var(--moss-700);
+
+    //utility-teal
+    --utility-teal-50: var(--teal-50);
+    --utility-teal-100: var(--teal-100);
+    --utility-teal-200: var(--teal-200);
+    --utility-teal-300: var(--teal-300);
+    --utility-teal-400: var(--teal-400);
+    --utility-teal-500: var(--teal-500);
+    --utility-teal-600: var(--teal-600);
+    --utility-teal-700: var(--teal-700);
+
+    //utility-cyan
+    --utility-cyan-50: var(--cyan-50);
+    --utility-cyan-100: var(--cyan-100);
+    --utility-cyan-200: var(--cyan-200);
+    --utility-cyan-300: var(--cyan-300);
+    --utility-cyan-400: var(--cyan-400);
+    --utility-cyan-500: var(--cyan-500);
+    --utility-cyan-600: var(--cyan-600);
+    --utility-cyan-700: var(--cyan-700);
+
+    //utility-sky-blue
+    --utility-sky-blue-50: var(--sky-blue-50);
+    --utility-sky-blue-100: var(--sky-blue-100);
+    --utility-sky-blue-200: var(--sky-blue-200);
+    --utility-sky-blue-300: var(--sky-blue-300);
+    --utility-sky-blue-400: var(--sky-blue-400);
+    --utility-sky-blue-500: var(--sky-blue-500);
+    --utility-sky-blue-600: var(--sky-blue-600);
+    --utility-sky-blue-700: var(--sky-blue-700);
+
+    //utility-indigo
+    --utility-indigo-50: var(--indigo-50);
+    --utility-indigo-100: var(--indigo-100);
+    --utility-indigo-200: var(--indigo-200);
+    --utility-indigo-300: var(--indigo-300);
+    --utility-indigo-400: var(--indigo-400);
+    --utility-indigo-500: var(--indigo-500);
+    --utility-indigo-600: var(--indigo-600);
+    --utility-indigo-700: var(--indigo-700);
+
+    //utility-purple
+    --utility-purple-50: var(--purple-50);
+    --utility-purple-100: var(--purple-100);
+    --utility-purple-200: var(--purple-200);
+    --utility-purple-300: var(--purple-300);
+    --utility-purple-400: var(--purple-400);
+    --utility-purple-500: var(--purple-500);
+    --utility-purple-600: var(--purple-600);
+    --utility-purple-700: var(--purple-700);
+
+    //utility-pink
+    --utility-pink-50: var(--pink-50);
+    --utility-pink-100: var(--pink-100);
+    --utility-pink-200: var(--pink-200);
+    --utility-pink-300: var(--pink-300);
+    --utility-pink-400: var(--pink-400);
+    --utility-pink-500: var(--pink-500);
+    --utility-pink-600: var(--pink-600);
+    --utility-pink-700: var(--pink-700);
+
+    //utility-rose
+    --utility-rose-50: var(--rose-50);
+    --utility-rose-100: var(--rose-100);
+    --utility-rose-200: var(--rose-200);
+    --utility-rose-300: var(--rose-300);
+    --utility-rose-400: var(--rose-400);
+    --utility-rose-500: var(--rose-500);
+    --utility-rose-600: var(--rose-600);
+    --utility-rose-700: var(--rose-700);
+
+    //utility-orange
+    --utility-orange-50: var(--orange-50);
+    --utility-orange-100: var(--orange-100);
+    --utility-orange-200: var(--orange-200);
+    --utility-orange-300: var(--orange-300);
+    --utility-orange-400: var(--orange-400);
+    --utility-orange-500: var(--orange-500);
+    --utility-orange-600: var(--orange-600);
+    --utility-orange-700: var(--orange-700);
+
+    //utility-amber
+    --utility-amber-50: var(--amber-50);
+    --utility-amber-100: var(--amber-100);
+    --utility-amber-200: var(--amber-200);
+    --utility-amber-300: var(--amber-300);
+    --utility-amber-400: var(--amber-400);
+    --utility-amber-500: var(--amber-500);
+    --utility-amber-600: var(--amber-600);
+    --utility-amber-700: var(--amber-700);
+
+    // text
+    --text: var(--neutral-10);
+    --text-subtle: var(--neutral-30);
+    --text-subtler: var(--neutral-50);
+    --text-subtlest: var(--neutral-60);
+    --text-disabled: var(--neutral-70);
+    --text-inverse: var(--white);
+    --text-static: var(--white);
+    --text-static-black: var(--neutral-10);
+    --text-brand: var(--blue-30);
+    --text-critical: var(--red-40);
+    --text-critical-bolder: var(--red);
+    --text-warning: var(--yellow-30);
+    --text-warning-bolder: var(--yellow-5);
+    --text-success-default: var(--green-20);
+    --text-success-bolder: var(--green);
+
+    // icon
+    --icon: var(--neutral-30);
+    --icon-subtle: var(--neutral-50);
+    --icon-subtlest: var(--neutral-60);
+    --icon-disabled: var(--neutral-70);
+    --icon-inverse: var(--white);
+    --icon-static: var(--white);
+    --icon-static-black: var(--neutral-30);
+    --icon-brand: var(--blue-30);
+    --icon-critical: var(--red-40);
+    --icon-warning: var(--yellow-30);
+    --icon-success: var(--green-20);
+
+    // surface
+    --surface-default: var(--white);
+    --surface-subtle: var(--neutral-99);
+    --surface-hovered: var(--neutral-95);
+    --surface-hovered-static: var(--neutral-95);
+    --surface-pressed: var(--neutral-90);
+    --surface-pressed-static: var(--neutral-90);
+    --surface-disabled: var(--neutral-99);
+    --surface-disabled-static: var(--neutral-99);
+    --surface-search-field: var(--white);
+    --surface-inverse: var(--neutral);
+    --surface-static: var(--white);
+    --surface-static-black: var(--neutral);
+    --surface-none: var(--none);
+    --surface-accent-green-subtlest: var(--green-90);
+    --surface-accent-green-subtler: var(--green-80);
+    --surface-accent-green-subtle: var(--green-70);
+    --surface-accent-green-bolder: var(--green-20);
+    --surface-accent-aqua-subtlest: var(--aqua-95);
+    --surface-accent-aqua-subtler: var(--aqua-80);
+    --surface-accent-aqua-subtle: var(--aqua-70);
+    --surface-accent-aqua-bolder: var(--aqua-20);
+    --surface-accent-blue-subtlest: var(--blue-95);
+    --surface-accent-blue-subtler: var(--blue-80);
+    --surface-accent-blue-subtle: var(--blue-70);
+    --surface-accent-blue-bolder: var(--blue-20);
+    --surface-accent-yellow-subtlest: var(--yellow-95);
+    --surface-accent-yellow-subtler: var(--yellow-80);
+    --surface-accent-yellow-subtle: var(--yellow-70);
+    --surface-accent-yellow-bolder: var(--yellow-20);
+    --surface-accent-red-subtlest: var(--red-95);
+    --surface-accent-red-subtler: var(--red-80);
+    --surface-accent-red-subtle: var(--red-70);
+    --surface-accent-red-bolder: var(--red-20);
+    --surface-accent-gray-subtlest: var(--neutral-95);
+    --surface-accent-gray-subtler: var(--neutral-85);
+    --surface-accent-gray-subtle: var(--neutral-75);
+    --surface-accent-gray-bolder: var(--neutral-60);
+    --surface-primary-default: var(--blue-30);
+    --surface-primary-hovered: var(--blue-20);
+    --surface-primary-pressed: var(--blue-10);
+    --surface-primary-subtle-default: var(--blue-95);
+    --surface-primary-subtle-hovered: var(--blue-90);
+    --surface-primary-subtle-pressed: var(--blue-80);
+    --surface-container-default: var(--neutral-variant-99);
+    --surface-container-hovered: var(--neutral-variant-85);
+    --surface-container-pressed: var(--neutral-variant-80);
+    --surface-container-selected-default: var(--neutral-variant-95);
+    --surface-container-selected-hovered: var(--neutral-variant-90);
+    --surface-container-selected-pressed: var(--neutral-variant-88);
+    --surface-container-special-default: var(--neutral-variant-85);
+    --surface-container-special-hovered: var(--neutral-variant-80);
+    --surface-container-special-subtle: var(--neutral-variant-99);
+    --surface-warning-default: var(--yellow-30);
+    --surface-warning-hovered: var(--yellow-20);
+    --surface-warning-pressed: var(--yellow-10);
+    --surface-warning-subtle-default: var(--yellow-95);
+    --surface-warning-subtle-hovered: var(--yellow-90);
+    --surface-warning-subtle-pressed: var(--yellow-80);
+    --surface-success-default: var(--green-20);
+    --surface-success-hovered: var(--green-30);
+    --surface-success-pressed: var(--green-20);
+    --surface-success-subtle-default: var(--green-95);
+    --surface-success-subtle-hovered: var(--green-90);
+    --surface-success-subtle-pressed: var(--green-80);
+    --surface-critical-default: var(--red-40);
+    --surface-critical-hovered: var(--red-20);
+    --surface-critical-pressed: var(--red-10);
+    --surface-critical-subtle-default: var(--red-95);
+    --surface-critical-subtle-hovered: var(--red-90);
+    --surface-critical-subtle-pressed: var(--red-80);
+    --surface-info-default: var(--aqua-40);
+    --surface-info-hovered: var(--aqua-30);
+    --surface-info-pressed: var(--aqua-20);
+    --surface-info-subtle-default: var(--aqua-95);
+    --surface-info-subtle-hovered: var(--aqua-90);
+    --surface-info-subtle-pressed: var(--aqua-80);
+    --surface-lemon-bold: var(--yellow-5);
+    --surface-lemon-default: var(--lemon-70);
+    --surface-lemon-subtle: var(--lemon-90);
+    --surface-lemon-subtlest: var(--white);
+    --alpha-facetime-white: var(--alpha-white-20);
+    --alpha-facetime-black: var(--alpha-black-20);
+    --alpha-facetime-static: var(--alpha-black-20);
+    --alpha-mask-desktop: var(--alpha-black-75);
+    --alpha-mask-mobile: var(--alpha-black-75);
+
+    --alpha-1: var(--alpha-white-1);
+    --alpha-3: var(--alpha-white-3);
+    --alpha-5: var(--alpha-white-5);
+    --alpha-8: var(--alpha-white-8);
+    --alpha-10: var(--alpha-white-10);
+    --alpha-20: var(--alpha-white-20);
+    --alpha-30: var(--alpha-white-30);
+    --alpha-40: var(--alpha-white-40);
+    --alpha-50: var(--alpha-white-50);
+    --alpha-60: var(--alpha-white-60);
+    --alpha-70: var(--alpha-white-70);
+    --alpha-80: var(--alpha-white-80);
+    --alpha-90: var(--alpha-white-90);
+    --alpha-100: var(--alpha-white-100);
+
+    --alpha-1-black: var(--alpha-black-1);
+    --alpha-3-black: var(--alpha-black-3);
+    --alpha-5-black: var(--alpha-black-5);
+    --alpha-8-black: var(--alpha-black-8);
+    --alpha-10-black: var(--alpha-black-10);
+    --alpha-20-black: var(--alpha-black-20);
+    --alpha-30-black: var(--alpha-black-30);
+    --alpha-40-black: var(--alpha-black-40);
+    --alpha-50-black: var(--alpha-black-50);
+    --alpha-60-black: var(--alpha-black-60);
+    --alpha-70-black: var(--alpha-black-70);
+    --alpha-80-black: var(--alpha-black-80);
+    --alpha-90-black: var(--alpha-black-90);
+    --alpha-100-black: var(--alpha-black-100);
+
+    --white-1: var(--alpha-white-1);
+    --white-3: var(--alpha-white-3);
+    --white-5: var(--alpha-white-5);
+    --white-8: var(--alpha-white-8);
+    --white-10: var(--alpha-white-10);
+    --white-20: var(--alpha-white-20);
+    --white-30: var(--alpha-white-30);
+    --white-40: var(--alpha-white-40);
+    --white-50: var(--alpha-white-50);
+    --white-60: var(--alpha-white-60);
+    --white-70: var(--alpha-white-70);
+    --white-80: var(--alpha-white-80);
+    --white-90: var(--alpha-white-90);
+    --white-100: var(--alpha-white-100);
+    --black-1: var(--alpha-black-1);
+    --black-3: var(--alpha-black-3);
+    --black-5: var(--alpha-black-5);
+    --black-8: var(--alpha-black-8);
+    --black-10: var(--alpha-black-10);
+    --black-20: var(--alpha-black-20);
+    --black-30: var(--alpha-black-30);
+    --black-40: var(--alpha-black-40);
+    --black-50: var(--alpha-black-50);
+    --black-60: var(--alpha-black-60);
+    --black-70: var(--alpha-black-70);
+    --black-80: var(--alpha-black-80);
+    --black-90: var(--alpha-black-90);
+    --black-100: var(--alpha-black-100);
+
+    --beta-white-1: var(--alpha-white-1);
+    --beta-white-3: var(--alpha-white-3);
+    --beta-white-5: var(--alpha-white-5);
+    --beta-white-8: var(--alpha-white-8);
+    --beta-white-10: var(--alpha-white-10);
+    --beta-white-20: var(--alpha-white-20);
+    --beta-white-30: var(--alpha-white-30);
+    --beta-white-40: var(--alpha-white-40);
+    --beta-white-50: var(--alpha-white-50);
+    --beta-white-60: var(--alpha-white-60);
+    --beta-white-70: var(--alpha-white-70);
+    --beta-white-80: var(--alpha-white-80);
+    --beta-white-90: var(--alpha-white-90);
+    --beta-white-100: var(--alpha-white-100);
+    --beta-black-1: var(--alpha-black-1);
+    --beta-black-3: var(--alpha-black-3);
+    --beta-black-5: var(--alpha-black-5);
+    --beta-black-8: var(--alpha-black-8);
+    --beta-black-10: var(--alpha-black-10);
+    --beta-black-20: var(--alpha-black-20);
+    --beta-black-30: var(--alpha-black-30);
+    --beta-black-40: var(--alpha-black-40);
+    --beta-black-50: var(--alpha-black-50);
+    --beta-black-60: var(--alpha-black-60);
+    --beta-black-70: var(--alpha-black-70);
+    --beta-black-80: var(--alpha-black-80);
+    --beta-black-90: var(--alpha-black-90);
+    --beta-black-100: var(--alpha-black-100);
+
+    // border
+    --border: var(--neutral-variant-80);
+    --border-static: var(--white);
+    --border-subtle: var(--neutral-variant-70);
+    --border-hovered: var(--neutral-variant-70);
+    --border-pressed: var(--neutral-variant-60);
+    --border-depressed: var(--neutral-variant-50);
+    --border-critical: var(--red-30);
+    --border-success: var(--green-40);
+    --border-brand: var(--blue-30);
+    --border-opaque: var(--alpha-white-5);
+    --border-warning: var(--yellow-10);
+    --border-warning-subtle: var(--yellow-35);
+
+    // shadow
+    --shadow-background-default: var(--alpha-black-10);
+    --shadow-background-bolder: var(--alpha-black-3);
+
+    --shadow-modal-default: var(--alpha-black-10);
+    --shadow-modal-bolder: var(--alpha-black-10);
+
+    --shadow-button-basic: var(--alpha-black-5);
+    --shadow-button-primary-1: var(--alpha-black-8);
+    --shadow-button-primary-2: var(--alpha-black-20);
+    --shadow-button-pressed: var(--alpha-black-5);
+
+    // focus-ring
+    --focus-ring-brand: var(--status-04-70);
+    --focus-ring-error: var(--red-55);
+    --focus-ring-warning: var(--yellow-40);
+  }
+}