@ndla/preset-panda 0.0.1

package/dist/styles.css

@@ -0,0 +1,687 @@
+@layer reset, base, tokens, recipes, utilities;
+
+@layer base{
+  :root {
+    --made-with-panda: '🐼';
+    --global-font-body: var(--fonts-sans);
+    --global-font-mono: var(--fonts-code);
+}
+
+  html {
+    min-height: 100%;
+}
+
+  body {
+    background: var(--colors-background-default);
+}
+
+  a,summary,[tabindex]:not([tabindex='-1']) {
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+}
+
+  a:is(:focus-visible, [data-focus-visible]),summary:is(:focus-visible, [data-focus-visible]),[tabindex]:not([tabindex='-1']):is(:focus-visible, [data-focus-visible]) {
+    outline: 3px;
+    border-radius: var(--radii-xsmall);
+    outline-offset: 3px;
+    outline-color: var(--colors-stroke-default);
+    outline-style: solid;
+}
+
+  code {
+    background: var(--colors-background-subtle);
+    white-space: pre-wrap;
+}
+
+  h1:not([class]) {
+    margin: 24px 0 12px 0;
+}
+
+  h2:not([class]) {
+    margin: 48px 0 12px 0;
+}
+
+  h3:not([class]),h4:not([class]),h5:not([class]) {
+    margin: 36px 0 6px 0;
+}
+
+  p:not([class]) {
+    margin-bottom: 24px;
+}
+
+  blockquote:not([class]) {
+    margin: 30px 0;
+}
+
+  h1 {
+    font-family: var(--fonts-sans);
+    font-weight: var(--font-weights-bold);
+    font-size: var(--font-sizes-3xlarge);
+    line-height: var(--line-heights-3xlarge);
+}
+
+  h1:where([lang='zh'], h1[lang='zh-Hans'], h1[lang='zh-Hant']):not([data-pinyin]) {
+    font-size: calc(var(--font-sizes-3xlarge) * 1.11);
+    line-height: calc(var(--line-heights-3xlarge) * 1.11);
+}
+
+  h2 {
+    font-family: var(--fonts-sans);
+    font-weight: var(--font-weights-bold);
+    font-size: var(--font-sizes-xxlarge);
+    line-height: var(--line-heights-xxlarge);
+}
+
+  h2:where([lang='zh'], h2[lang='zh-Hans'], h2[lang='zh-Hant']):not([data-pinyin]) {
+    font-size: calc(var(--font-sizes-xxlarge) * 1.11);
+    line-height: calc(var(--line-heights-xxlarge) * 1.11);
+}
+
+  h3 {
+    font-family: var(--fonts-sans);
+    font-weight: var(--font-weights-bold);
+    font-size: var(--font-sizes-xlarge);
+    line-height: var(--line-heights-xlarge);
+}
+
+  h3:where([lang='zh'], h3[lang='zh-Hans'], h3[lang='zh-Hant']):not([data-pinyin]) {
+    font-size: calc(var(--font-sizes-xlarge) * 1.11);
+    line-height: calc(var(--line-heights-xlarge) * 1.11);
+}
+
+  h4,h5,h6 {
+    font-family: var(--fonts-sans);
+    font-weight: var(--font-weights-bold);
+    font-size: var(--font-sizes-large);
+    line-height: var(--line-heights-large);
+}
+
+  h4:where([lang='zh'], h4[lang='zh-Hans'], h4[lang='zh-Hant']):not([data-pinyin]),h5:where([lang='zh'], h5[lang='zh-Hans'], h5[lang='zh-Hant']):not([data-pinyin]),h6:where([lang='zh'], h6[lang='zh-Hans'], h6[lang='zh-Hant']):not([data-pinyin]) {
+    font-size: calc(var(--font-sizes-large) * 1.11);
+    line-height: calc(var(--line-heights-large) * 1.11);
+}
+
+  p {
+    font-family: var(--fonts-sans);
+    font-weight: var(--font-weights-normal);
+    font-size: var(--font-sizes-small);
+    line-height: var(--line-heights-small);
+}
+
+  p:where([lang='zh'], p[lang='zh-Hans'], p[lang='zh-Hant']):not([data-pinyin]) {
+    font-size: calc(var(--font-sizes-small) * 1.11);
+    line-height: calc(var(--line-heights-small) * 1.11);
+}
+
+  a {
+    color: var(--colors-text-link);
+    text-decoration: underline;
+}
+
+  a:is(:hover, [data-hover]) {
+    text-decoration: none;
+}
+
+  *,::before,::after,::backdrop {
+    --blur: /*-*/ /*-*/;
+    --brightness: /*-*/ /*-*/;
+    --contrast: /*-*/ /*-*/;
+    --grayscale: /*-*/ /*-*/;
+    --hue-rotate: /*-*/ /*-*/;
+    --invert: /*-*/ /*-*/;
+    --saturate: /*-*/ /*-*/;
+    --sepia: /*-*/ /*-*/;
+    --drop-shadow: /*-*/ /*-*/;
+    --backdrop-blur: /*-*/ /*-*/;
+    --backdrop-brightness: /*-*/ /*-*/;
+    --backdrop-contrast: /*-*/ /*-*/;
+    --backdrop-grayscale: /*-*/ /*-*/;
+    --backdrop-hue-rotate: /*-*/ /*-*/;
+    --backdrop-invert: /*-*/ /*-*/;
+    --backdrop-opacity: /*-*/ /*-*/;
+    --backdrop-saturate: /*-*/ /*-*/;
+    --backdrop-sepia: /*-*/ /*-*/;
+    --gradient-from-position: /*-*/ /*-*/;
+    --gradient-to-position: /*-*/ /*-*/;
+    --gradient-via-position: /*-*/ /*-*/;
+    --scroll-snap-strictness: proximity;
+    --border-spacing-x: 0;
+    --border-spacing-y: 0;
+    --translate-x: 0;
+    --translate-y: 0;
+    --rotate: 0;
+    --rotate-x: 0;
+    --rotate-y: 0;
+    --skew-x: 0;
+    --skew-y: 0;
+    --scale-x: 1;
+    --scale-y: 1;
+}
+}
+
+@layer tokens{
+  :where(:root, :host) {
+    --colors-grey-50: #FAFAFA;
+    --colors-grey-100: #F2F2F3;
+    --colors-grey-200: #E4E4E7;
+    --colors-grey-300: #C9C9CF;
+    --colors-grey-400: #AFAFB6;
+    --colors-grey-500: #94949E;
+    --colors-grey-600: #797986;
+    --colors-grey-700: #61616B;
+    --colors-grey-800: #494950;
+    --colors-grey-900: #303036;
+    --colors-grey-950: #18181B;
+    --colors-blue-50: #F1F9FD;
+    --colors-blue-100: #D1ECFA;
+    --colors-blue-200: #ACDFF6;
+    --colors-blue-300: #87D4F2;
+    --colors-blue-400: #6CCCEF;
+    --colors-blue-500: #40BDEB;
+    --colors-blue-600: #1E9CD2;
+    --colors-blue-700: #197AB2;
+    --colors-blue-800: #155784;
+    --colors-blue-900: #113F5F;
+    --colors-blue-950: #0B253D;
+    --colors-purple-50: #F9F6FE;
+    --colors-purple-100: #F2EBFC;
+    --colors-purple-200: #E7DAFA;
+    --colors-purple-300: #DDC7FA;
+    --colors-purple-400: #D2B4F8;
+    --colors-purple-500: #C8A4F7;
+    --colors-purple-600: #B586F3;
+    --colors-purple-700: #8B65DC;
+    --colors-purple-800: #823CC8;
+    --colors-purple-900: #5E1F9E;
+    --colors-purple-950: #40116F;
+    --colors-yellow-50: #FFFCF0;
+    --colors-yellow-100: #FFF9DB;
+    --colors-yellow-200: #FFF7CC;
+    --colors-yellow-300: #FFF1A8;
+    --colors-yellow-400: #FFED8F;
+    --colors-yellow-500: #FFE767;
+    --colors-yellow-600: #FFDD33;
+    --colors-yellow-700: #FFCC00;
+    --colors-yellow-800: #FFB700;
+    --colors-yellow-900: #FAA700;
+    --colors-yellow-950: #F08C00;
+    --colors-yellow-1000: #CC8302;
+    --colors-yellow-1100: #A25C06;
+    --colors-yellow-1200: #86480D;
+    --colors-yellow-1300: #7A3701;
+    --colors-yellow-1400: #481A00;
+    --colors-green-50: #EDFDF2;
+    --colors-green-100: #DAFBE5;
+    --colors-green-200: #C3F8D5;
+    --colors-green-300: #A7F6C1;
+    --colors-green-400: #81F3A7;
+    --colors-green-500: #63F293;
+    --colors-green-600: #42D774;
+    --colors-green-700: #2CAF58;
+    --colors-green-800: #238042;
+    --colors-green-900: #174F2A;
+    --colors-green-950: #11361E;
+    --colors-pink-50: #FEF2F3;
+    --colors-pink-100: #FDECEF;
+    --colors-pink-200: #FCDEE3;
+    --colors-pink-300: #F9C3CE;
+    --colors-pink-400: #F79CAE;
+    --colors-pink-500: #F67992;
+    --colors-pink-600: #EF4D6D;
+    --colors-pink-700: #D53457;
+    --colors-pink-800: #A82447;
+    --colors-pink-900: #761935;
+    --colors-pink-950: #4A1124;
+    --colors-white: #FFFFFF;
+    --colors-primary: #2D1B62;
+    --easings-default: cubic-bezier(0.17, 0.04, 0.03, 0.94);
+    --easings-emphasized-in: cubic-bezier(0.05, 0.7, 0.1, 1.0);
+    --easings-emphasized-out: cubic-bezier(0.3, 0.0, 0.8, 0.15);
+    --easings-pulse: cubic-bezier(0.4, 0.0, 0.6, 1.0);
+    --durations-super-fast: 100ms;
+    --durations-fast: 200ms;
+    --durations-normal: 400ms;
+    --durations-slow: 600ms;
+    --durations-infinite: infinite;
+    --radii-sharp: 0px;
+    --radii-xsmall: var(--spacing-4xsmall);
+    --radii-small: var(--spacing-xxsmall);
+    --radii-medium: var(--spacing-xsmall);
+    --radii-large: var(--spacing-medium);
+    --radii-full: 100%;
+    --spacing-1: 2px;
+    --spacing-2: 4px;
+    --spacing-3: 6px;
+    --spacing-4: 8px;
+    --spacing-5: 10px;
+    --spacing-6: 12px;
+    --spacing-7: 14px;
+    --spacing-8: 16px;
+    --spacing-9: 18px;
+    --spacing-10: 20px;
+    --spacing-11: 22px;
+    --spacing-12: 24px;
+    --spacing-13: 26px;
+    --spacing-14: 28px;
+    --spacing-15: 30px;
+    --spacing-16: 32px;
+    --spacing-17: 34px;
+    --spacing-18: 36px;
+    --spacing-19: 38px;
+    --spacing-20: 40px;
+    --spacing-22: 44px;
+    --spacing-24: 48px;
+    --spacing-26: 52px;
+    --spacing-28: 56px;
+    --spacing-32: 64px;
+    --spacing-36: 72px;
+    --spacing-40: 80px;
+    --spacing-44: 88px;
+    --spacing-48: 96px;
+    --spacing-50: 100px;
+    --spacing-60: 120px;
+    --spacing-72: 144px;
+    --spacing-75: 150px;
+    --spacing-100: 200px;
+    --spacing-150: 300px;
+    --spacing-200: 400px;
+    --spacing-250: 500px;
+    --spacing-300: 600px;
+    --spacing-350: 700px;
+    --spacing-400: 800px;
+    --spacing-500: 1000px;
+    --spacing-550: 1100px;
+    --sizes-1: 2px;
+    --sizes-2: 4px;
+    --sizes-3: 6px;
+    --sizes-4: 8px;
+    --sizes-5: 10px;
+    --sizes-6: 12px;
+    --sizes-7: 14px;
+    --sizes-8: 16px;
+    --sizes-9: 18px;
+    --sizes-10: 20px;
+    --sizes-11: 22px;
+    --sizes-12: 24px;
+    --sizes-13: 26px;
+    --sizes-14: 28px;
+    --sizes-15: 30px;
+    --sizes-16: 32px;
+    --sizes-17: 34px;
+    --sizes-18: 36px;
+    --sizes-19: 38px;
+    --sizes-20: 40px;
+    --sizes-22: 44px;
+    --sizes-24: 48px;
+    --sizes-26: 52px;
+    --sizes-28: 56px;
+    --sizes-32: 64px;
+    --sizes-36: 72px;
+    --sizes-40: 80px;
+    --sizes-44: 88px;
+    --sizes-48: 96px;
+    --sizes-50: 100px;
+    --sizes-60: 120px;
+    --sizes-72: 144px;
+    --sizes-75: 150px;
+    --sizes-100: 200px;
+    --sizes-150: 300px;
+    --sizes-200: 400px;
+    --sizes-250: 500px;
+    --sizes-300: 600px;
+    --sizes-350: 700px;
+    --sizes-400: 800px;
+    --sizes-500: 1000px;
+    --sizes-550: 1100px;
+    --sizes-breakpoint-mobile: 20em;
+    --sizes-breakpoint-mobile-wide: 29.75em;
+    --sizes-breakpoint-tablet: 37.5625em;
+    --sizes-breakpoint-tablet-wide: 48em;
+    --sizes-breakpoint-desktop: 61.3125em;
+    --sizes-breakpoint-wide: 81.3125em;
+    --sizes-breakpoint-ultra-wide: 100.0625em;
+    --line-heights-xxsmall: 0.75rem;
+    --line-heights-xsmall: 1.375rem;
+    --line-heights-small: 1.5rem;
+    --line-heights-medium: 1.75rem;
+    --line-heights-large: 1.875rem;
+    --line-heights-xlarge: 2.25rem;
+    --line-heights-xxlarge: 2.375rem;
+    --line-heights-3xlarge: 3rem;
+    --line-heights-4xlarge: 3.75rem;
+    --font-weights-light: 300;
+    --font-weights-normal: 400;
+    --font-weights-semibold: 600;
+    --font-weights-bold: 700;
+    --font-sizes-xxsmall: 0.75rem;
+    --font-sizes-xsmall: 0.875rem;
+    --font-sizes-small: 1rem;
+    --font-sizes-medium: 1.125rem;
+    --font-sizes-large: 1.375rem;
+    --font-sizes-xlarge: 1.625rem;
+    --font-sizes-xxlarge: 1.875rem;
+    --font-sizes-3xlarge: 2.375rem;
+    --font-sizes-4xlarge: 3rem;
+    --fonts-sans: Satoshi, Helvetica, Arial, STKaiti, '华文楷体', KaiTi, SimKai, '楷体', KaiU, DFKai-SB, '標楷體', SongTi, '宋体', sans-serif;
+    --fonts-serif: 'Source Serif Pro', Times, STKaiti, '华文楷体', KaiTi, SimKai, '楷体', KaiU, DFKai-SB, '標楷體', SongTi, '宋体', serif;
+    --fonts-code: 'Source Code ProVariable', Monaco;
+    --animations-spin: spin 700ms infinite linear;
+    --animations-collapse-in: collapse-in 250ms var(--easings-emphasized-in);
+    --animations-collapse-out: collapse-out 200ms var(--easings-emphasized-out);
+    --animations-fade-shift-in: fade-shift-in 200ms var(--easings-emphasized-in);
+    --animations-fade-shift-out: fade-shift-in 200ms var(--easings-emphasized-in);
+    --animations-backdrop-in: fade-in 250ms var(--easings-emphasized-in);
+    --animations-backdrop-out: fade-out 200ms var(--easings-emphasized-out);
+    --animations-dialog-in: fade-in 400ms var(--easings-emphasized-in);
+    --animations-dialog-out: fade-out 200ms var(--easings-emphasized-out);
+    --animations-drawer-in-left: slide-in-left 400ms var(--easings-emphasized-in);
+    --animations-drawer-out-left: slide-out-left 200ms var(--easings-emphasized-out);
+    --animations-drawer-in-right: slide-in-right 400ms var(--easings-emphasized-in);
+    --animations-drawer-out-right: slide-out-right 200ms var(--easings-emphasized-out);
+    --animations-drawer-in-bottom: slide-in-bottom 400ms var(--easings-emphasized-in);
+    --animations-drawer-out-bottom: slide-out-bottom 200ms var(--easings-emphasized-out);
+    --animations-drawer-in-top: slide-in-top 400ms var(--easings-emphasized-in);
+    --animations-drawer-out-top: slide-out-top 200ms var(--easings-emphasized-out);
+    --animations-skeleton-pulse: skeleton-pulse 2s var(--easings-pulse) infinite;
+    --shadows-xxsmall: 0px 1px 3px 0px rgba(0, 0, 0, 0.15), 0px 0px 0.5px 0px rgba(0, 0, 0, 0.18);
+    --shadows-xsmall: 0px 3px 8px 0px rgba(0, 0, 0, 0.10), 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 0px 0.5px 0px rgba(0, 0, 0, 0.18);
+    --shadows-medium: 0px 5px 12px 0px rgba(0, 0, 0, 0.13), 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 0px 0.5px 0px rgba(0, 0, 0, 0.15);
+    --shadows-large: 0px 10px 16px 0px rgba(0, 0, 0, 0.12), 0px 2px 5px 0px rgba(0, 0, 0, 0.15), 0px 0px 0.5px 0px rgba(0, 0, 0, 0.12);
+    --shadows-xlarge: 0px 10px 24px 0px rgba(0, 0, 0, 0.18), 0px 2px 5px 0px rgba(0, 0, 0, 0.15), 0px 0px 0.5px 0px rgba(0, 0, 0, 0.08);
+    --z-index-hide: -1;
+    --z-index-base: 0;
+    --z-index-docked: 10;
+    --z-index-dropdown: 1000;
+    --z-index-sticky: 1100;
+    --z-index-banner: 1200;
+    --z-index-overlay: 1300;
+    --z-index-modal: 1400;
+    --z-index-popover: 1500;
+    --z-index-skip-link: 1600;
+    --z-index-toast: 1700;
+    --z-index-tooltip: 1800;
+    --breakpoints-mobile: 20em;
+    --breakpoints-mobile-wide: 29.75em;
+    --breakpoints-tablet: 37.5625em;
+    --breakpoints-tablet-wide: 48em;
+    --breakpoints-desktop: 61.3125em;
+    --breakpoints-wide: 81.3125em;
+    --breakpoints-ultra-wide: 100.0625em;
+    --spacing-4xsmall: var(--spacing-2);
+    --spacing-3xsmall: var(--spacing-3);
+    --spacing-xxsmall: var(--spacing-4);
+    --spacing-xsmall: var(--spacing-6);
+    --spacing-small: var(--spacing-8);
+    --spacing-medium: var(--spacing-12);
+    --spacing-large: var(--spacing-15);
+    --spacing-xlarge: var(--spacing-18);
+    --spacing-xxlarge: var(--spacing-24);
+    --spacing-3xlarge: var(--spacing-36);
+    --spacing-4xlarge: var(--spacing-48);
+    --spacing-surface-4xsmall: var(--spacing-50);
+    --spacing-surface-3xsmall: var(--spacing-75);
+    --spacing-surface-xxsmall: var(--spacing-100);
+    --spacing-surface-xsmall: var(--spacing-150);
+    --spacing-surface-small: var(--spacing-200);
+    --spacing-surface-medium: var(--spacing-250);
+    --spacing-surface-large: var(--spacing-300);
+    --spacing-surface-xlarge: var(--spacing-350);
+    --spacing-surface-xxlarge: var(--spacing-400);
+    --spacing-surface-3xlarge: var(--spacing-500);
+    --spacing-surface-4xlarge: var(--spacing-550);
+    --sizes-4xsmall: var(--spacing-2);
+    --sizes-3xsmall: var(--spacing-3);
+    --sizes-xxsmall: var(--spacing-4);
+    --sizes-xsmall: var(--spacing-6);
+    --sizes-small: var(--spacing-8);
+    --sizes-medium: var(--spacing-12);
+    --sizes-large: var(--spacing-15);
+    --sizes-xlarge: var(--spacing-18);
+    --sizes-xxlarge: var(--spacing-24);
+    --sizes-3xlarge: var(--spacing-36);
+    --sizes-4xlarge: var(--spacing-48);
+    --sizes-surface-4xsmall: var(--spacing-50);
+    --sizes-surface-3xsmall: var(--spacing-75);
+    --sizes-surface-xxsmall: var(--spacing-100);
+    --sizes-surface-xsmall: var(--spacing-150);
+    --sizes-surface-small: var(--spacing-200);
+    --sizes-surface-medium: var(--spacing-250);
+    --sizes-surface-large: var(--spacing-300);
+    --sizes-surface-xlarge: var(--spacing-350);
+    --sizes-surface-xxlarge: var(--spacing-400);
+    --sizes-surface-3xlarge: var(--spacing-500);
+    --sizes-surface-4xlarge: var(--spacing-550);
+    --colors-background-default: var(--colors-white);
+    --colors-background-subtle: var(--colors-grey-100);
+    --colors-background-strong: var(--colors-purple-50);
+    --colors-text-default: var(--colors-grey-950);
+    --colors-text-subtle: var(--colors-grey-700);
+    --colors-text-strong: var(--colors-primary);
+    --colors-text-action: var(--colors-purple-800);
+    --colors-text-on-action: var(--colors-white);
+    --colors-text-link: var(--colors-purple-900);
+    --colors-text-error: var(--colors-pink-800);
+    --colors-text-disabled: var(--colors-grey-400);
+    --colors-icon-default: var(--colors-grey-950);
+    --colors-icon-strong: var(--colors-primary);
+    --colors-icon-on-action: var(--colors-white);
+    --colors-surface-brand-1: var(--colors-purple-500);
+    --colors-surface-brand-1-subtle: var(--colors-purple-100);
+    --colors-surface-brand-1-strong: var(--colors-purple-950);
+    --colors-surface-brand-2: var(--colors-blue-500);
+    --colors-surface-brand-2-subtle: var(--colors-blue-100);
+    --colors-surface-brand-2-strong: var(--colors-blue-900);
+    --colors-surface-brand-3: var(--colors-green-500);
+    --colors-surface-brand-3-subtle: var(--colors-green-100);
+    --colors-surface-brand-3-strong: var(--colors-green-900);
+    --colors-surface-brand-4: var(--colors-yellow-500);
+    --colors-surface-brand-4-subtle: var(--colors-yellow-100);
+    --colors-surface-brand-4-strong: var(--colors-yellow-1100);
+    --colors-surface-brand-5: var(--colors-pink-500);
+    --colors-surface-brand-5-subtle: var(--colors-pink-100);
+    --colors-surface-brand-5-strong: var(--colors-pink-900);
+    --colors-surface-default: var(--colors-white);
+    --colors-surface-hover: var(--colors-grey-100);
+    --colors-surface-active: var(--colors-grey-200);
+    --colors-surface-selected: var(--colors-purple-200);
+    --colors-surface-disabled: var(--colors-grey-200);
+    --colors-surface-disabled-subtle: var(--colors-grey-50);
+    --colors-surface-disabled-strong: var(--colors-grey-700);
+    --colors-surface-info-subtle: var(--colors-grey-100);
+    --colors-surface-info-subtle-hover: var(--colors-grey-200);
+    --colors-surface-info-subtle-active: var(--colors-grey-300);
+    --colors-surface-action: var(--colors-primary);
+    --colors-surface-action-hover: var(--colors-purple-900);
+    --colors-surface-action-active: var(--colors-purple-800);
+    --colors-surface-action-subtle: var(--colors-purple-50);
+    --colors-surface-action-subtle-hover: var(--colors-purple-100);
+    --colors-surface-action-subtle-hover-strong: var(--colors-purple-400);
+    --colors-surface-action-subtle-active: var(--colors-purple-300);
+    --colors-surface-success: var(--colors-green-800);
+    --colors-surface-success-hover: var(--colors-green-900);
+    --colors-surface-success-active: var(--colors-green-950);
+    --colors-surface-success-subtle: var(--colors-green-100);
+    --colors-surface-success-subtle-hover: var(--colors-green-300);
+    --colors-surface-success-subtle-active: var(--colors-green-500);
+    --colors-surface-warning: var(--colors-yellow-600);
+    --colors-surface-warning-hover: var(--colors-yellow-800);
+    --colors-surface-warning-active: var(--colors-yellow-1200);
+    --colors-surface-warning-subtle: var(--colors-yellow-100);
+    --colors-surface-warning-subtle-hover: var(--colors-yellow-300);
+    --colors-surface-warning-subtle-active: var(--colors-yellow-400);
+    --colors-surface-error: var(--colors-pink-800);
+    --colors-surface-error-hover: var(--colors-pink-900);
+    --colors-surface-error-active: var(--colors-pink-950);
+    --colors-surface-error-subtle: var(--colors-pink-100);
+    --colors-surface-error-subtle-hover: var(--colors-pink-300);
+    --colors-surface-error-subtle-active: var(--colors-pink-500);
+    --colors-stroke-default: var(--colors-primary);
+    --colors-stroke-hover: var(--colors-purple-800);
+    --colors-stroke-subtle: var(--colors-grey-500);
+    --colors-stroke-success: var(--colors-green-900);
+    --colors-stroke-info: var(--colors-grey-500);
+    --colors-stroke-warning: var(--colors-yellow-1200);
+    --colors-stroke-error: var(--colors-pink-800);
+    --colors-stroke-disabled: var(--colors-grey-300);
+}
+
+  @keyframes spin {
+    from {
+      transform: rotate(0deg);
+}
+
+    to {
+      transform: rotate(360deg);
+}
+}
+
+  @keyframes fade-shift-in {
+    0% {
+      opacity: 0;
+      transform: translateY(-4px);
+}
+
+    100% {
+      opacity: 1;
+      transform: translateY(0);
+}
+}
+
+  @keyframes fade-shift-out {
+    0% {
+      opacity: 1;
+      transform: translateY(0);
+}
+
+    100% {
+      opacity: 0;
+      transform: translateY(-4px);
+}
+}
+
+  @keyframes collapse-in {
+    0% {
+      height: 0;
+}
+
+    100% {
+      height: var(--height);
+}
+}
+
+  @keyframes collapse-out {
+    0% {
+      height: var(--height);
+}
+
+    100% {
+      height: 0;
+}
+}
+
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+}
+
+    to {
+      opacity: 1;
+}
+}
+
+  @keyframes fade-out {
+    from {
+      opacity: 1;
+}
+
+    to {
+      opacity: 0;
+}
+}
+
+  @keyframes slide-in-left {
+    0% {
+      transform: translateX(-100%);
+}
+
+    100% {
+      transform: translateX(0%);
+}
+}
+
+  @keyframes slide-out-left {
+    0% {
+      transform: translateX(0%);
+}
+
+    100% {
+      transform: translateX(-100%);
+}
+}
+
+  @keyframes slide-in-right {
+    0% {
+      transform: translateX(100%);
+}
+
+    100% {
+      transform: translateX(0%);
+}
+}
+
+  @keyframes slide-out-right {
+    0% {
+      transform: translateX(0%);
+}
+
+    100% {
+      transform: translateX(100%);
+}
+}
+
+  @keyframes slide-in-top {
+    0% {
+      transform: translateY(-100%);
+}
+
+    100% {
+      transform: translateY(0%);
+}
+}
+
+  @keyframes slide-out-top {
+    0% {
+      transform: translateY(0%);
+}
+
+    100% {
+      transform: translateY(-100%);
+}
+}
+
+  @keyframes slide-in-bottom {
+    0% {
+      transform: translateY(100%);
+}
+
+    100% {
+      transform: translateY(0%);
+}
+}
+
+  @keyframes slide-out-bottom {
+    0% {
+      transform: translateY(0%);
+}
+
+    100% {
+      transform: translateY(100%);
+}
+}
+
+  @keyframes skeleton-pulse {
+    50% {
+      opacity: 0.5;
+}
+}
+}