cetec-design-system 0.0.2 → 0.0.4

package/styled-system/styles.css

@@ -0,0 +1,672 @@
+@layer reset, base, tokens, recipes, utilities;
+
+@layer reset{
+  html,:host {
+    --font-fallback: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+    -webkit-text-size-adjust: 100%;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -moz-tab-size: 4;
+    tab-size: 4;
+    -webkit-tap-highlight-color: transparent;
+    line-height: 1.5;
+    font-family: var(--global-font-body, var(--font-fallback));
+}
+
+  *,::before,::after,::backdrop,::file-selector-button {
+    margin: 0px;
+    padding: 0px;
+    box-sizing: border-box;
+    border-width: 0px;
+    border-style: solid;
+    border-color: var(--global-color-border, currentColor);
+}
+
+  hr {
+    height: 0px;
+    color: inherit;
+    border-top-width: 1px;
+}
+
+  body {
+    height: 100%;
+    line-height: inherit;
+}
+
+  img {
+    border-style: none;
+}
+
+  img,svg,video,canvas,audio,iframe,embed,object {
+    display: block;
+    vertical-align: middle;
+}
+
+  img,video {
+    max-width: 100%;
+    height: auto;
+}
+
+  h1,h2,h3,h4,h5,h6 {
+    text-wrap: balance;
+    font-size: inherit;
+    font-weight: inherit;
+}
+
+  p,h1,h2,h3,h4,h5,h6 {
+    overflow-wrap: break-word;
+}
+
+  ol,ul,menu {
+    list-style: none;
+}
+
+  button,input:where([type='button'], [type='reset'], [type='submit']),::file-selector-button {
+    appearance: button;
+    -webkit-appearance: button;
+}
+
+  button,input,optgroup,select,textarea,::file-selector-button {
+    font: inherit;
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
+    letter-spacing: inherit;
+    color: inherit;
+    background: var(--colors-transparent);
+}
+
+  ::placeholder {
+    opacity: 1;
+    --placeholder-fallback: color-mix(in srgb, currentColor 50%, transparent);
+    color: var(--global-color-placeholder, var(--placeholder-fallback));
+}
+
+  textarea {
+    resize: vertical;
+}
+
+  table {
+    text-indent: 0px;
+    border-collapse: collapse;
+    border-color: inherit;
+}
+
+  summary {
+    display: list-item;
+}
+
+  small {
+    font-size: 80%;
+}
+
+  sub,sup {
+    position: relative;
+    vertical-align: baseline;
+    font-size: 75%;
+    line-height: 0;
+}
+
+  sub {
+    bottom: -0.25em;
+}
+
+  sup {
+    top: -0.5em;
+}
+
+  dialog {
+    padding: 0px;
+}
+
+  a {
+    color: inherit;
+    text-decoration: inherit;
+}
+
+  abbr:where([title]) {
+    text-decoration: underline dotted;
+}
+
+  b,strong {
+    font-weight: bolder;
+}
+
+  code,kbd,samp,pre {
+    --font-mono-fallback: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New';
+    font-feature-settings: normal;
+    font-variation-settings: normal;
+    font-family: var(--global-font-mono, var(--font-mono-fallback));
+    font-size: 1em;
+}
+
+  progress {
+    vertical-align: baseline;
+}
+
+  ::-webkit-search-decoration,::-webkit-search-cancel-button {
+    -webkit-appearance: none;
+}
+
+  ::-webkit-inner-spin-button,::-webkit-outer-spin-button {
+    height: auto;
+}
+
+  :-moz-ui-invalid {
+    box-shadow: none;
+}
+
+  :-moz-focusring {
+    outline: auto;
+}
+
+  [hidden]:where(:not([hidden='until-found'])) {
+    display: none !important;
+}
+}
+
+@layer base{
+  :root {
+    --made-with-panda: '🐼';
+}
+
+  *,::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;
+}
+
+  *,*::before,*::after {
+    box-sizing: border-box;
+    margin: var(--spacing-0);
+    padding: var(--spacing-0);
+}
+
+  *:is(:focus-visible, [data-focus-visible]),*::before:is(:focus-visible, [data-focus-visible]),*::after:is(:focus-visible, [data-focus-visible]) {
+    outline-color: var(--colors-slate-80);
+}
+
+  .dark *:is(:focus-visible, [data-focus-visible]),[data-color-mode=dark] *:is(:focus-visible, [data-focus-visible]),.dark *::before:is(:focus-visible, [data-focus-visible]),[data-color-mode=dark] *::before:is(:focus-visible, [data-focus-visible]),.dark *::after:is(:focus-visible, [data-focus-visible]),[data-color-mode=dark] *::after:is(:focus-visible, [data-focus-visible]) {
+    outline-color: var(--colors-slate-5);
+}
+
+  html {
+    --global-font-heading: var(--fonts-heading);
+    --global-font-body: var(--fonts-body);
+    --global-font-mono: var(--fonts-mono);
+}
+
+  body {
+    font-variation-settings: "CRSV" 0, "CASL" 0;
+    background: var(--colors-slate-0);
+    color: var(--colors-slate-60);
+    font-family: var(--fonts-body);
+    font-weight: var(--font-weights-normal);
+}
+
+  .dark body,[data-color-mode=dark] body {
+    background: var(--colors-slate-90);
+    color: var(--colors-slate-20);
+}
+
+  h1,h2,h3,h4,h5,h6 {
+    color: var(--colors-slate-90);
+    font-weight: var(--font-weights-black);
+    line-height: calc(1em + 0.5rem);
+}
+
+  .dark h1,[data-color-mode=dark] h1,.dark h2,[data-color-mode=dark] h2,.dark h3,[data-color-mode=dark] h3,.dark h4,[data-color-mode=dark] h4,.dark h5,[data-color-mode=dark] h5,.dark h6,[data-color-mode=dark] h6 {
+    color: var(--colors-slate-5);
+}
+
+  p {
+    margin-bottom: 0.5rem;
+}
+
+  b,strong {
+    font-weight: var(--font-weights-bold);
+}
+
+  i,em {
+    font-variation-settings: "CRSV" 0, "CASL" 0, "slnt" -15;
+    font-style: italic;
+}
+
+  u {
+    text-decoration: underline;
+}
+
+  code,kbd,samp,pre {
+    font-family: var(--fonts-mono);
+    font-size: 1em;
+}
+
+  table {
+    border-color: currentcolor;
+}
+
+  button,input,optgroup,select,textarea {
+    margin: var(--spacing-0);
+    font-family: inherit;
+    font-size: 100%;
+    line-height: 1.15;
+}
+
+  button,[type="button"],[type="reset"],[type="submit"] {
+    -webkit-appearance: button;
+}
+
+  legend {
+    padding: var(--spacing-0);
+}
+
+  progress {
+    vertical-align: baseline;
+}
+
+  ::-webkit-inner-spin-button,::-webkit-outer-spin-button {
+    height: auto;
+}
+
+  [type="search"] {
+    -webkit-appearance: textfield;
+    outline-offset: -2px;
+}
+
+  ::-webkit-search-decoration {
+    -webkit-appearance: none;
+}
+
+  ::-webkit-file-upload-button {
+    -webkit-appearance: button;
+    font: inherit;
+}
+
+  summary {
+    display: list-item;
+}
+}
+
+@layer tokens{
+  :where(:root, :host) {
+    --aspect-ratios-square: 1 / 1;
+    --aspect-ratios-landscape: 4 / 3;
+    --aspect-ratios-portrait: 3 / 4;
+    --aspect-ratios-wide: 16 / 9;
+    --aspect-ratios-ultrawide: 18 / 5;
+    --aspect-ratios-golden: 1.618 / 1;
+    --borders-none: none;
+    --shadows-low: 0 0 2px var(--colors-utility-shadow-color), 0 1px 1px var(--colors-utility-shadow-color), 0 2px 3px var(--colors-utility-shadow-color);
+    --shadows-medium: 0 0 2px var(--colors-utility-shadow-color), 0 2px 2px var(--colors-utility-shadow-color), 0 4px 4px var(--colors-utility-shadow-color), 0 8px 8px var(--colors-utility-shadow-color);
+    --shadows-high: 0 0 2px var(--colors-utility-shadow-color), 0 2px 4px var(--colors-utility-shadow-color), 0 6px 8px 1px var(--colors-utility-shadow-color), 0 14px 16px 2px var(--colors-utility-shadow-color);
+    --shadows-inset: inset 0 0 2px var(--colors-utility-shadow-color), inset 0 2px 1px var(--colors-utility-shadow-color), inset 0 3px 2px var(--colors-utility-shadow-color);
+    --easings-default: cubic-bezier(0.4, 0, 0.2, 1);
+    --easings-linear: linear;
+    --easings-in: cubic-bezier(0.4, 0, 1, 1);
+    --easings-out: cubic-bezier(0, 0, 0.2, 1);
+    --easings-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+    --durations-fastest: 50ms;
+    --durations-faster: 100ms;
+    --durations-fast: 150ms;
+    --durations-normal: 200ms;
+    --durations-slow: 300ms;
+    --durations-slower: 400ms;
+    --durations-slowest: 500ms;
+    --letter-spacings-tighter: -0.05em;
+    --letter-spacings-tight: -0.025em;
+    --letter-spacings-normal: 0em;
+    --letter-spacings-wide: 0.025em;
+    --letter-spacings-wider: 0.05em;
+    --letter-spacings-widest: 0.1em;
+    --line-heights-none: 1;
+    --line-heights-tight: 1em + 0.25rem;
+    --line-heights-default: 1em + 0.5rem;
+    --line-heights-loose: 1em + 0.75rem;
+    --blurs-sm: var(--sizes-4);
+    --blurs-base: var(--sizes-8);
+    --blurs-md: var(--sizes-12);
+    --blurs-lg: var(--sizes-16);
+    --blurs-xl: var(--sizes-24);
+    --blurs-2xl: var(--sizes-40);
+    --blurs-3xl: var(--sizes-64);
+    --animations-spin: spin 1s linear infinite;
+    --animations-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
+    --animations-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+    --animations-bounce: bounce 1s infinite;
+    --colors-transparent: transparent;
+    --colors-current: currentColor;
+    --colors-slate-0: #FFFFFF;
+    --colors-slate-1: #FAFAFA;
+    --colors-slate-2: #F9F8F6;
+    --colors-slate-3: #F7F5F3;
+    --colors-slate-4: #F6F3EF;
+    --colors-slate-5: #F4F0EB;
+    --colors-slate-10: #E3E1DE;
+    --colors-slate-20: #CBCAC8;
+    --colors-slate-30: #AFADAB;
+    --colors-slate-40: #939190;
+    --colors-slate-50: #767675;
+    --colors-slate-60: #5F5F5E;
+    --colors-slate-70: #474747;
+    --colors-slate-80: #2E2E2E;
+    --colors-slate-90: #1E1E1E;
+    --colors-slate-100: #000000;
+    --colors-gold-1: #FFFCF4;
+    --colors-gold-2: #FFF9E9;
+    --colors-gold-3: #FEF6DE;
+    --colors-gold-4: #FEF3D3;
+    --colors-gold-5: #FEF0C8;
+    --colors-gold-10: #FFE396;
+    --colors-gold-20: #FFBE2E;
+    --colors-gold-30: #E5A000;
+    --colors-gold-40: #C2850C;
+    --colors-gold-50: #936F38;
+    --colors-gold-60: #7A591A;
+    --colors-gold-70: #5C410A;
+    --colors-gold-80: #3B2B15;
+    --colors-gold-90: #1E1100;
+    --colors-orange-5: #FFF3F2;
+    --colors-orange-10: #FDE0DB;
+    --colors-orange-20: #FDB8AE;
+    --colors-orange-30: #FF8D7B;
+    --colors-orange-40: #FB5A47;
+    --colors-orange-50: #E52207;
+    --colors-orange-60: #B50909;
+    --colors-orange-70: #8B0A03;
+    --colors-orange-80: #5C1111;
+    --colors-orange-90: #200100;
+    --colors-tan-5: #F5F0E6;
+    --colors-tan-10: #F1E5CD;
+    --colors-tan-20: #DEC69A;
+    --colors-tan-30: #C7A97B;
+    --colors-tan-40: #AD8B65;
+    --colors-tan-50: #8E704F;
+    --colors-tan-60: #6B5947;
+    --colors-tan-70: #4D4438;
+    --colors-tan-80: #322D26;
+    --colors-tan-90: #191714;
+    --colors-cyan-5: #E7F6F8;
+    --colors-cyan-10: #CCECF2;
+    --colors-cyan-20: #99DEEA;
+    --colors-cyan-30: #5DC0D1;
+    --colors-cyan-40: #449DAC;
+    --colors-cyan-50: #168092;
+    --colors-cyan-60: #2A646D;
+    --colors-cyan-70: #2C4A4E;
+    --colors-cyan-80: #203133;
+    --colors-cyan-90: #111819;
+    --colors-blue-5: #E8F5FF;
+    --colors-blue-10: #CFE8FF;
+    --colors-blue-20: #A1D3FF;
+    --colors-blue-30: #58B4FF;
+    --colors-blue-40: #2491FF;
+    --colors-blue-50: #0076DA;
+    --colors-blue-60: #005EA2;
+    --colors-blue-70: #0B4778;
+    --colors-blue-80: #112F4E;
+    --colors-blue-90: #11181D;
+    --colors-green-1: #F8FEF4;
+    --colors-green-2: #F1FDE9;
+    --colors-green-3: #EBFBDD;
+    --colors-green-4: #E4FAD2;
+    --colors-green-5: #DDF9C7;
+    --colors-green-10: #C5EE93;
+    --colors-green-20: #98D035;
+    --colors-green-30: #7FB135;
+    --colors-green-40: #719F2A;
+    --colors-green-50: #538200;
+    --colors-green-60: #466C04;
+    --colors-green-70: #2F4A0B;
+    --colors-green-80: #243413;
+    --colors-green-90: #0D1400;
+    --colors-yellow-1: #FFFDF3;
+    --colors-yellow-2: #FFFBE7;
+    --colors-yellow-3: #FFF9DA;
+    --colors-yellow-4: #FFF7CE;
+    --colors-yellow-5: #FFF5C2;
+    --colors-yellow-10: #FEE685;
+    --colors-yellow-20: #FACE00;
+    --colors-yellow-30: #DDAA01;
+    --colors-yellow-40: #B38C00;
+    --colors-yellow-50: #947100;
+    --colors-yellow-60: #776017;
+    --colors-yellow-70: #5C4809;
+    --colors-yellow-80: #422D19;
+    --colors-yellow-90: #1C0B00;
+    --colors-red-1: #FFF9FA;
+    --colors-red-2: #FFF3F5;
+    --colors-red-3: #FFEEF0;
+    --colors-red-4: #FFE8EB;
+    --colors-red-5: #FFE2E6;
+    --colors-red-10: #FFB1B8;
+    --colors-red-20: #FF7F8A;
+    --colors-red-30: #FF4D5B;
+    --colors-red-40: #FE1D2D;
+    --colors-red-50: #E50513;
+    --colors-red-60: #B3000E;
+    --colors-red-70: #810009;
+    --colors-red-80: #4F0004;
+    --colors-red-90: #200000;
+    --fonts-heading: 'Ruda Variable', Source Sans, Geneva, Tahoma, Verdana, sans-serif;
+    --fonts-body: 'Recursive Variable', Geneva, Tahoma, Verdana, sans-serif;
+    --fonts-mono: 'Recursive Variable', Andale Mono, monaco, Consolas, Lucida Console, monospace;
+    --font-sizes-12: 0.75rem;
+    --font-sizes-14: 0.875rem;
+    --font-sizes-16: 1rem;
+    --font-sizes-20: 1.25rem;
+    --font-sizes-24: 1.5rem;
+    --font-sizes-32: 2rem;
+    --font-sizes-40: 2.5rem;
+    --font-sizes-48: 3rem;
+    --font-sizes-64: 4rem;
+    --font-sizes-72: 4.5rem;
+    --font-sizes-80: 5rem;
+    --font-sizes-96: 6rem;
+    --font-weights-light: 300;
+    --font-weights-normal: 400;
+    --font-weights-medium: 500;
+    --font-weights-bold: 700;
+    --font-weights-black: 900;
+    --sizes-0: 0;
+    --sizes-1: 0.0625rem;
+    --sizes-2: 0.125rem;
+    --sizes-3: 0.1875rem;
+    --sizes-4: 0.25rem;
+    --sizes-5: 0.3125rem;
+    --sizes-6: 0.375rem;
+    --sizes-7: 0.4375rem;
+    --sizes-8: 0.5rem;
+    --sizes-9: 0.5625rem;
+    --sizes-10: 0.625rem;
+    --sizes-12: 0.75rem;
+    --sizes-14: 0.875rem;
+    --sizes-16: 1rem;
+    --sizes-20: 1.25rem;
+    --sizes-22: 1.375rem;
+    --sizes-24: 1.5rem;
+    --sizes-32: 2rem;
+    --sizes-40: 2.5rem;
+    --sizes-48: 3rem;
+    --sizes-56: 3.5rem;
+    --sizes-64: 4rem;
+    --sizes-72: 4.5rem;
+    --sizes-80: 5rem;
+    --sizes-96: 6rem;
+    --sizes-full: 100%;
+    --sizes-min: min-content;
+    --sizes-max: max-content;
+    --sizes-fit: fit-content;
+    --sizes-xs: 20rem;
+    --sizes-sm: 24rem;
+    --sizes-md: 28rem;
+    --sizes-lg: 32rem;
+    --sizes-xl: 36rem;
+    --sizes-2xl: 42rem;
+    --sizes-3xl: 48rem;
+    --sizes-4xl: 56rem;
+    --sizes-5xl: 64rem;
+    --sizes-6xl: 72rem;
+    --sizes-7xl: 80rem;
+    --sizes-8xl: 90rem;
+    --sizes-prose: 65ch;
+    --sizes-breakpoint-xs: 480px;
+    --sizes-breakpoint-sm: 640px;
+    --sizes-breakpoint-md: 768px;
+    --sizes-breakpoint-lg: 1024px;
+    --sizes-breakpoint-xl: 1280px;
+    --sizes-breakpoint-2xl: 1536px;
+    --spacing-0: 0;
+    --spacing-1: 0.0625rem;
+    --spacing-2: 0.125rem;
+    --spacing-3: 0.1875rem;
+    --spacing-4: 0.25rem;
+    --spacing-5: 0.3125rem;
+    --spacing-6: 0.375rem;
+    --spacing-7: 0.4375rem;
+    --spacing-8: 0.5rem;
+    --spacing-9: 0.5625rem;
+    --spacing-10: 0.625rem;
+    --spacing-12: 0.75rem;
+    --spacing-14: 0.875rem;
+    --spacing-16: 1rem;
+    --spacing-20: 1.25rem;
+    --spacing-22: 1.375rem;
+    --spacing-24: 1.5rem;
+    --spacing-32: 2rem;
+    --spacing-40: 2.5rem;
+    --spacing-48: 3rem;
+    --spacing-56: 3.5rem;
+    --spacing-64: 4rem;
+    --spacing-72: 4.5rem;
+    --spacing-80: 5rem;
+    --spacing-96: 6rem;
+    --spacing-full: 100%;
+    --spacing-min: min-content;
+    --spacing-max: max-content;
+    --spacing-fit: fit-content;
+    --spacing-xs: 20rem;
+    --spacing-sm: 24rem;
+    --spacing-md: 28rem;
+    --spacing-lg: 32rem;
+    --spacing-xl: 36rem;
+    --spacing-2xl: 42rem;
+    --spacing-3xl: 48rem;
+    --spacing-4xl: 56rem;
+    --spacing-5xl: 64rem;
+    --spacing-6xl: 72rem;
+    --spacing-7xl: 80rem;
+    --spacing-8xl: 90rem;
+    --spacing-prose: 65ch;
+    --radii-0: 0;
+    --radii-1: 0.0625rem;
+    --radii-2: 0.125rem;
+    --radii-3: 0.188rem;
+    --radii-4: 0.25rem;
+    --radii-8: 0.5rem;
+    --radii-16: 1rem;
+    --radii-100: 100%;
+    --breakpoints-xs: 480px;
+    --breakpoints-sm: 640px;
+    --breakpoints-md: 768px;
+    --breakpoints-lg: 1024px;
+    --breakpoints-xl: 1280px;
+    --breakpoints-2xl: 1536px;
+    --colors-brand-slate: var(--colors-slate-90);
+    --colors-brand-gold: var(--colors-gold-20);
+    --colors-success-lighter: var(--colors-green-2);
+    --colors-success-light: var(--colors-green-10);
+    --colors-success-default: var(--colors-green-40);
+    --colors-success-dark: var(--colors-green-60);
+    --colors-success-darker: var(--colors-green-70);
+    --colors-warning-lighter: var(--colors-yellow-2);
+    --colors-warning-light: var(--colors-yellow-10);
+    --colors-warning-default: var(--colors-yellow-30);
+    --colors-warning-dark: var(--colors-yellow-60);
+    --colors-warning-darker: var(--colors-yellow-70);
+    --colors-error-lighter: var(--colors-red-2);
+    --colors-error-light: var(--colors-red-10);
+    --colors-error-default: var(--colors-red-50);
+    --colors-error-dark: var(--colors-red-60);
+    --colors-error-darker: var(--colors-red-70);
+    --colors-utility-shadow-color: color-mix(in srgb, var(--colors-slate-90) 20%, transparent);
+}
+
+  :where(.dark, [data-color-mode=dark]) {
+    --colors-success-lighter: var(--colors-green-5);
+    --colors-success-light: var(--colors-green-20);
+    --colors-success-default: var(--colors-green-30);
+    --colors-success-dark: var(--colors-green-60);
+    --colors-success-darker: var(--colors-green-70);
+    --colors-warning-lighter: var(--colors-yellow-2);
+    --colors-warning-light: var(--colors-yellow-10);
+    --colors-warning-default: var(--colors-yellow-20);
+    --colors-warning-dark: var(--colors-yellow-60);
+    --colors-warning-darker: var(--colors-yellow-70);
+    --colors-error-lighter: var(--colors-red-5);
+    --colors-error-light: var(--colors-red-20);
+    --colors-error-default: var(--colors-red-40);
+    --colors-error-dark: var(--colors-red-60);
+    --colors-error-darker: var(--colors-red-70);
+    --colors-utility-shadow-color: color-mix(in srgb, var(--colors-slate-100) 40%, transparent)
+}
+
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+}
+}
+
+  @keyframes ping {
+    75%,100% {
+      transform: scale(2);
+      opacity: 0;
+}
+}
+
+  @keyframes pulse {
+    50% {
+      opacity: 0.5;
+}
+}
+
+  @keyframes bounce {
+    0%,100% {
+      transform: translateY(-25%);
+      animation-timing-function: cubic-bezier(0.8,0,1,1);
+}
+
+    50% {
+      transform: none;
+      animation-timing-function: cubic-bezier(0,0,0.2,1);
+}
+}
+}

package/styled-system/tokens/index.d.ts

@@ -0,0 +1,9 @@
+/* eslint-disable */
+import type { Token } from './tokens';
+
+export declare const token: {
+  (path: Token, fallback?: string): string
+  var: (path: Token, fallback?: string) => string
+}
+
+export * from './tokens';