@studious-creative/yumekit 0.1.0

package/dist/styles/variables.css

@@ -0,0 +1,397 @@
+/* Colors */
+:root {
+    --neutral--: #7f8286ff;
+    --neutral-white: #ffffffff;
+    --neutral-black: #000000ff;
+    --neutral-light-0: #f7f7faff;
+    --neutral-light-1: #f0f0f2ff;
+    --neutral-light-2: #dfe0e3ff;
+    --neutral-light-3: #cacbcfff;
+    --neutral-light-4: #bbbdc0ff;
+    --neutral-light-5: #acaeb2ff;
+    --neutral-light-6: #9d9fa3ff;
+    --neutral-light-7: #8e9195ff;
+    --neutral-dark-0: #0c0c0dff;
+    --neutral-dark-1: #151617ff;
+    --neutral-dark-2: #292a2bff;
+    --neutral-dark-3: #37383aff;
+    --neutral-dark-4: #46474aff;
+    --neutral-dark-5: #545659ff;
+    --neutral-dark-6: #626568ff;
+    --neutral-dark-7: #717377ff;
+    --neutral-black-translucent: #0000001f;
+    --neutral-white-translucent: #1111111f;
+    --red--: #b80421ff;
+    --red-light-0: #f2e6e8ff;
+    --red-light-1: #ebcacfff;
+    --red-light-2: #e4aeb6ff;
+    --red-light-3: #dc919dff;
+    --red-light-4: #d57585ff;
+    --red-light-5: #ce596cff;
+    --red-light-6: #c73d53ff;
+    --red-light-7: #bf203aff;
+    --red-dark-0: #0d0103ff;
+    --red-dark-1: #220107ff;
+    --red-dark-2: #38020bff;
+    --red-dark-3: #4d020eff;
+    --red-dark-4: #630312ff;
+    --red-dark-5: #780316ff;
+    --red-dark-6: #8d031aff;
+    --red-dark-7: #a3041dff;
+    --red-translucent: #b804211f;
+    --orange--: #d13704ff;
+    --orange-light-0: #f2e9e6ff;
+    --orange-light-1: #eed3caff;
+    --orange-light-2: #eabdaeff;
+    --orange-light-3: #e6a691ff;
+    --orange-light-4: #e29075ff;
+    --orange-light-5: #dd7a59ff;
+    --orange-light-6: #d9643dff;
+    --orange-light-7: #d54d20ff;
+    --orange-dark-0: #0d0300ff;
+    --orange-dark-1: #260a01ff;
+    --orange-dark-2: #3e1001ff;
+    --orange-dark-3: #571702ff;
+    --orange-dark-4: #6f1d02ff;
+    --orange-dark-5: #882403ff;
+    --orange-dark-6: #a02a03ff;
+    --orange-dark-7: #b93104ff;
+    --orange-translucent: #d137041f;
+    --amber--: #d16004ff;
+    --amber-light-0: #f2ece6ff;
+    --amber-light-1: #eedbcaff;
+    --amber-light-2: #eac9aeff;
+    --amber-light-3: #e6b891ff;
+    --amber-light-4: #e2a675ff;
+    --amber-light-5: #dd9559ff;
+    --amber-light-6: #d9833dff;
+    --amber-light-7: #d57220ff;
+    --amber-dark-0: #0d0c0cff;
+    --amber-dark-1: #26170bff;
+    --amber-dark-2: #3e210aff;
+    --amber-dark-3: #572c09ff;
+    --amber-dark-4: #6f3608ff;
+    --amber-dark-5: #884107ff;
+    --amber-dark-6: #a04b06ff;
+    --amber-dark-7: #b95605ff;
+    --amber-translucent: #d160041f;
+    --yellow--: #d17f04ff;
+    --yellow-light-0: #f2eadfff;
+    --yellow-light-1: #eeddc4ff;
+    --yellow-light-2: #eacfa8ff;
+    --yellow-light-3: #e6c28dff;
+    --yellow-light-4: #e2b572ff;
+    --yellow-light-5: #dda756ff;
+    --yellow-light-6: #d99a3bff;
+    --yellow-light-7: #d58c1fff;
+    --yellow-dark-0: #0d0c0cff;
+    --yellow-dark-1: #261a0bff;
+    --yellow-dark-2: #3e290aff;
+    --yellow-dark-3: #573709ff;
+    --yellow-dark-4: #6f4608ff;
+    --yellow-dark-5: #885407ff;
+    --yellow-dark-6: #a06206ff;
+    --yellow-dark-7: #b97105ff;
+    --yellow-translucent: #d17f041f;
+    --lime--: #cad104ff;
+    --lime-light-0: #f2f2dfff;
+    --lime-light-1: #edeec4ff;
+    --lime-light-2: #e8eaa8ff;
+    --lime-light-3: #e3e68dff;
+    --lime-light-4: #dee272ff;
+    --lime-light-5: #d9dd56ff;
+    --lime-light-6: #d4d93bff;
+    --lime-light-7: #cfd51fff;
+    --lime-dark-0: #0d0d0cff;
+    --lime-dark-1: #25260bff;
+    --lime-dark-2: #3c3e0aff;
+    --lime-dark-3: #545709ff;
+    --lime-dark-4: #6c6f08ff;
+    --lime-dark-5: #838807ff;
+    --lime-dark-6: #9ba006ff;
+    --lime-dark-7: #b2b905ff;
+    --lime-translucent: #cad1041f;
+    --green--: #2dba73ff;
+    --green-light-0: #e6f2ecff;
+    --green-light-1: #cfebddff;
+    --green-light-2: #b8e4ceff;
+    --green-light-3: #a1ddbfff;
+    --green-light-4: #8ad6b0ff;
+    --green-light-5: #72cfa0ff;
+    --green-light-6: #5bc891ff;
+    --green-light-7: #44c182ff;
+    --green-dark-0: #030d08ff;
+    --green-dark-1: #082315ff;
+    --green-dark-2: #0e3823ff;
+    --green-dark-3: #134e30ff;
+    --green-dark-4: #18643eff;
+    --green-dark-5: #1d794bff;
+    --green-dark-6: #238f58ff;
+    --green-dark-7: #28a466ff;
+    --green-translucent: #2dba731f;
+    --teal--: #04b8b8ff;
+    --teal-light-0: #f2fffeff;
+    --teal-light-1: #d4f6f5ff;
+    --teal-light-2: #b7ededff;
+    --teal-light-3: #99e4e4ff;
+    --teal-light-4: #7bdcdbff;
+    --teal-light-5: #5dd3d2ff;
+    --teal-light-6: #40cacaff;
+    --teal-light-7: #22c1c1ff;
+    --teal-dark-0: #0c0d0dff;
+    --teal-dark-1: #0b2624ff;
+    --teal-dark-2: #0a3e3cff;
+    --teal-dark-3: #095753ff;
+    --teal-dark-4: #086f6aff;
+    --teal-dark-5: #078881ff;
+    --teal-dark-6: #06a099ff;
+    --teal-dark-7: #05b9b0ff;
+    --teal-translucent: #04b8b81f;
+    --blue--: #0576ffff;
+    --blue-light-0: #ebf5ffff;
+    --blue-light-1: #cee5ffff;
+    --blue-light-2: #b2d5ffff;
+    --blue-light-3: #95c5ffff;
+    --blue-light-4: #78b6ffff;
+    --blue-light-5: #5ba6ffff;
+    --blue-light-6: #3f96ffff;
+    --blue-light-7: #2286ffff;
+    --blue-dark-0: #0c0c0dff;
+    --blue-dark-1: #0b192bff;
+    --blue-dark-2: #0a274aff;
+    --blue-dark-3: #093468ff;
+    --blue-dark-4: #094186ff;
+    --blue-dark-5: #084ea4ff;
+    --blue-dark-6: #075cc3ff;
+    --blue-dark-7: #0669e1ff;
+    --blue-translucent: #0576ff1f;
+    --indigo--: #5405ffff;
+    --indigo-light-0: #f6f2ffff;
+    --indigo-light-1: #e2d4ffff;
+    --indigo-light-2: #ceb7ffff;
+    --indigo-light-3: #b999ffff;
+    --indigo-light-4: #a57cffff;
+    --indigo-light-5: #915effff;
+    --indigo-light-6: #7d40ffff;
+    --indigo-light-7: #6823ffff;
+    --indigo-dark-0: #0d0c0cff;
+    --indigo-dark-1: #160b2aff;
+    --indigo-dark-2: #1f0a49ff;
+    --indigo-dark-3: #280967ff;
+    --indigo-dark-4: #310986ff;
+    --indigo-dark-5: #3908a4ff;
+    --indigo-dark-6: #4207c2ff;
+    --indigo-dark-7: #4b06e1ff;
+    --indigo-translucent: #5405ff1f;
+    --purple--: #8a05ffff;
+    --purple-light-0: #f9f2ffff;
+    --purple-light-1: #ebd4ffff;
+    --purple-light-2: #ddb7ffff;
+    --purple-light-3: #cf99ffff;
+    --purple-light-4: #c27cffff;
+    --purple-light-5: #b45effff;
+    --purple-light-6: #a640ffff;
+    --purple-light-7: #9823ffff;
+    --purple-dark-0: #0c0c0dff;
+    --purple-dark-1: #1c0b2bff;
+    --purple-dark-2: #2c0a4aff;
+    --purple-dark-3: #3b0968ff;
+    --purple-dark-4: #4b0986ff;
+    --purple-dark-5: #5b08a4ff;
+    --purple-dark-6: #6b07c3ff;
+    --purple-dark-7: #7a06e1ff;
+    --purple-translucent: #8a05ff1f;
+    --pink--: #ff05a8ff;
+    --pink-light-0: #f9f2ffff;
+    --pink-light-1: #fad4f4ff;
+    --pink-light-2: #fbb7e9ff;
+    --pink-light-3: #fb99deff;
+    --pink-light-4: #fc7cd4ff;
+    --pink-light-5: #fd5ec9ff;
+    --pink-light-6: #fe40beff;
+    --pink-light-7: #fe23b3ff;
+    --pink-dark-0: #0c0c0dff;
+    --pink-dark-1: #2a0b20ff;
+    --pink-dark-2: #490a34ff;
+    --pink-dark-3: #670947ff;
+    --pink-dark-4: #86095bff;
+    --pink-dark-5: #a4086eff;
+    --pink-dark-6: #c20781ff;
+    --pink-dark-7: #e10695ff;
+    --pink-translucent: #ff05a81f;
+    --brown--: #ab642eff;
+    --brown-light-0: #f2dfdfff;
+    --brown-light-1: #e9d0c9ff;
+    --brown-light-2: #e0c0b3ff;
+    --brown-light-3: #d7b19dff;
+    --brown-light-4: #cfa287ff;
+    --brown-light-5: #c69270ff;
+    --brown-light-6: #bd835aff;
+    --brown-light-7: #b47344ff;
+    --brown-dark-0: #0d0c0cff;
+    --brown-dark-1: #211710ff;
+    --brown-dark-2: #352215ff;
+    --brown-dark-3: #482d19ff;
+    --brown-dark-4: #5c381dff;
+    --brown-dark-5: #704321ff;
+    --brown-dark-6: #844e26ff;
+    --brown-dark-7: #97592aff;
+    --brown-translucent: #ab642e1f;
+}
+
+/* Numerics */
+:root {
+    --border-none: 0px;
+    --border-x-thin: 1px;
+    --border-thin: 2px;
+    --border-medium: 4px;
+    --border-thick: 8px;
+    --border-x-thick: 10px;
+    --spacing-none: 0px;
+    --spacing-4x-small: 1px;
+    --spacing-2x-small: 2px;
+    --spacing-x-small: 4px;
+    --spacing-small: 6px;
+    --spacing-medium: 8px;
+    --spacing-large: 12px;
+    --spacing-x-large: 16px;
+    --spacing-2x-large: 24px;
+    --spacing-4x-large: 32px;
+    --font-size-display-1: 6em;
+    --font-size-display-2: 5.5em;
+    --font-size-display-3: 4.5em;
+    --font-size-display-4: 3.5em;
+    --font-size-h1: 2em;
+    --font-size-h2: 1.5em;
+    --font-size-h3: 1.17em;
+    --font-size-h4: 1em;
+    --font-size-h5: 0.83em;
+    --font-size-paragraph: 1em;
+    --font-size-small: 0.8em;
+    --font-size-label: 0.83em;
+    --font-size-button: 1em;
+    --font-size-quote: 1.17em;
+    --radii-none: 0px;
+    --radii-x-small: 0.125em;
+    --radii-small: 0.25em;
+    --radii-medium: 0.375em;
+    --radii-large: 0.5px;
+    --radii-x-large: 1em;
+    --radii-full: 9999px;
+    --sizing-2x-small: 16px;
+    --sizing-x-small: 19px;
+    --sizing-small: 32px;
+    --sizing-medium: 40px;
+    --sizing-large: 56px;
+}
+
+/* Components */
+
+:root {
+    --component-appbar-collapsed-width: 48px;
+    --component-appbar-padding: var(--spacing-medium);
+    --component-appbar-width: 240px;
+    --component-avatar-border-radius-circle: var(--radii-full);
+    --component-avatar-border-radius-square: var(--radii-small);
+    --component-avatar-size-large: var(--sizing-large);
+    --component-avatar-size-medium: var(--sizing-medium);
+    --component-avatar-size-small: var(--sizing-small);
+    --component-badge-border-radius-circle: var(--radii-full);
+    --component-badge-border-radius-square: var(--radii-small);
+    --component-badge-padding-large: var(--spacing-small);
+    --component-badge-padding-medium: var(--spacing-x-small);
+    --component-badge-padding-small: var(--spacing-2x-small);
+    --component-badge-size-large: var(--sizing-medium);
+    --component-badge-size-medium: var(--sizing-small);
+    --component-badge-size-small: var(--sizing-2x-small);
+    --component-button-border-radius-inner: var(--radii-x-small);
+    --component-button-border-radius-outer: var(--radii-small);
+    --component-button-border-width: var(--border-thin);
+    --component-button-border-width-2: var(--border-x-thin);
+    --component-button-border-width-2: var(--border-x-thin);
+    --component-button-padding-large: var(--spacing-x-large);
+    --component-button-padding-medium: var(--spacing-medium);
+    --component-button-padding-small: var(--spacing-x-small);
+    --component-card-border-radius-inner: var(--radii-small);
+    --component-card-border-radius-outer: var(--radii-medium);
+    --component-card-border-width: var(--border-x-thin);
+    --component-card-inner-border-width: var(--border-x-thin);
+    --component-card-padding-inner: var(--spacing-medium);
+    --component-card-padding-outer: var(--spacing-x-large);
+    --component-checkbox-icon-size: var(--sizing-2x-small);
+    --component-checkbox-size: var(--sizing-x-small);
+    --component-dialog-border-radius-inner: var(--radii-x-small);
+    --component-dialog-border-radius-outer: var(--radii-small);
+    --component-dialog-border-width: var(--border-x-thin);
+    --component-dialog-inner-border-width: var(--border-x-thin);
+    --component-dialog-padding: var(--spacing-medium);
+    --component-drawer-border-radius: var(--radii-small);
+    --component-drawer-border-width: var(--border-x-thin);
+    --component-drawer-handle-padding: var(--spacing-x-small);
+    --component-drawer-handle-width: var(--spacing-x-small);
+    --component-drawer-padding: var(--spacing-medium);
+    --component-inputs-border-radius-inner: var(--radii-x-small);
+    --component-inputs-border-radius-outer: var(--radii-small);
+    --component-inputs-border-width: var(--border-thin);
+    --component-inputs-padding-large: var(--spacing-x-large);
+    --component-inputs-padding-medium: var(--spacing-medium);
+    --component-inputs-padding-small: var(--spacing-x-small);
+    --component-menu-border-radius: var(--radii-x-small);
+    --component-menu-border-width: var(--border-x-thin);
+    --component-menu-padding-horizontal: var(--spacing-small);
+    --component-menu-padding-vertical: var(--spacing-x-small);
+    --component-panelbar-border-radius: var(--radii-x-small);
+    --component-panelbar-border-width: var(--border-x-thin);
+    --component-panelbar-border-width: var(--border-x-thin);
+    --component-panelbar-padding: var(--spacing-medium);
+    --component-progress-border-radius-inner: var(--radii-small);
+    --component-progress-border-radius-outer: calc(var(--radii-small) + 4px);
+    --component-progress-border-width: var(--border-x-thin);
+    --component-progress-padding: var(--spacing-x-small);
+    --component-progress-size-large: var(--sizing-large);
+    --component-progress-size-medium: var(--sizing-medium);
+    --component-progress-size-small: var(--sizing-small);
+    --component-radio-dot-offset: var(--spacing-2x-small);
+    --component-radio-dot-size: var(--spacing-medium);
+    --component-radio-size: var(--sizing-2x-small);
+    --component-sidebar-border-radius: var(--radii-small);
+    --component-sidebar-border-width: var(--border-x-thin);
+    --component-slider-border-radius-inner: var(--radii-small);
+    --component-slider-border-radius-outer: calc(var(--radii-small) + 4px);
+    --component-slider-border-width: var(--border-x-thin);
+    --component-slider-padding: var(--spacing-x-small);
+    --component-slider-thumb-border-radius: var(--radii-x-small);
+    --component-switch-border-radius: var(--radii-full);
+    --component-switch-border-width: var(--border-x-thin);
+    --component-switch-padding: var(--spacing-2x-small);
+    --component-tab-border-radius-inner: var(--radii-x-small);
+    --component-tab-border-radius-outer: var(--radii-small);
+    --component-tab-border-width: var(--border-x-thin);
+    --component-tab-gap-large: var(--spacing-large);
+    --component-tab-gap-medium: var(--spacing-small);
+    --component-tab-gap-small: var(--spacing-2x-small);
+    --component-tab-padding-large: var(--spacing-2x-large);
+    --component-tab-padding-medium: var(--spacing-large);
+    --component-tab-padding-small: var(--spacing-small);
+    --component-table-border-radius: var(--radii-small);
+    --component-table-border-width: var(--border-x-thin);
+    --component-table-border-width-header: var(--border-thin);
+    --component-table-padding-large: var(--spacing-large);
+    --component-table-padding-medium: var(--spacing-medium);
+    --component-table-padding-small: var(--spacing-small);
+    --component-tag-border-radius-circle: var(--radii-full);
+    --component-tag-border-radius-square: var(--radii-small);
+    --component-tag-padding-large: var(--spacing-small);
+    --component-tag-padding-medium: var(--spacing-x-small);
+    --component-tag-padding-small: var(--spacing-2x-small);
+    --component-tag-size-large: var(--sizing-large);
+    --component-tag-size-medium: var(--sizing-medium);
+    --component-tag-size-small: var(--sizing-small);
+    --component-toast-border-radius: var(--radii-small);
+    --component-toast-offset: var(--spacing-x-large);
+    --component-toast-padding: var(--spacing-medium);
+    --component-toast-padding-h: var(--spacing-x-large);
+    --component-tooltip-border-radius: var(--radii-small);
+    --component-tooltip-padding: var(--spacing-x-small);
+    --component-tooltip-padding-h: var(--spacing-medium);
+}