@studious-creative/yumekit 0.1.5 → 0.1.7

package/dist/styles/variables.css

@@ -288,14 +288,20 @@
 /* Components */
 
 :root {
+    /* appbar */
     --component-appbar-collapsed-width: 48px;
     --component-appbar-padding: var(--spacing-medium);
     --component-appbar-width: 240px;
+    --component-appbar-z-index: 100;
+
+    /* avatar */
     --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);
+
+    /* badge */
     --component-badge-border-radius-circle: var(--radii-full);
     --component-badge-border-radius-square: var(--radii-small);
     --component-badge-padding-large: var(--spacing-small);
@@ -304,46 +310,71 @@
     --component-badge-size-large: var(--sizing-medium);
     --component-badge-size-medium: var(--sizing-small);
     --component-badge-size-small: var(--sizing-2x-small);
+
+    /* button */
     --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);
+
+    /* card */
     --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);
+
+    /* checkbox */
     --component-checkbox-icon-size: var(--sizing-2x-small);
     --component-checkbox-size: var(--sizing-x-small);
+
+    /* dialog */
     --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-dialog-z-index: 1000;
+
+    /* drawer */
     --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-drawer-z-index: 5000;
+
+    /* icon */
+    --component-icon-size-large: var(--spacing-4x-large);
+    --component-icon-size-medium: var(--spacing-2x-large);
+    --component-icon-size-small: var(--spacing-x-large);
+
+    /* inputs */
     --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);
+
+    /* menu */
     --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-menu-z-index: 1001;
+
+    /* panelbar */
     --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-indent: var(--spacing-x-large);
     --component-panelbar-padding: var(--spacing-medium);
+
+    /* progress */
     --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);
@@ -351,35 +382,52 @@
     --component-progress-size-large: var(--sizing-large);
     --component-progress-size-medium: var(--sizing-medium);
     --component-progress-size-small: var(--sizing-small);
+
+    /* radio */
     --component-radio-dot-offset: var(--spacing-2x-small);
     --component-radio-dot-size: var(--spacing-medium);
     --component-radio-size: var(--sizing-2x-small);
+
+    /* select */
+    --component-select-z-index: 6000;
+
+    /* sidebar */
     --component-sidebar-border-radius: var(--radii-small);
     --component-sidebar-border-width: var(--border-x-thin);
+
+    /* slider */
     --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);
+
+    /* switch */
     --component-switch-border-radius: var(--radii-full);
     --component-switch-border-width: var(--border-x-thin);
     --component-switch-padding: var(--spacing-2x-small);
+
+    /* tab */
     --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-content-padding: var(--spacing-large);
     --component-tab-gap-large: var(--spacing-large);
     --component-tab-gap-medium: var(--spacing-small);
     --component-tab-gap-small: var(--spacing-2x-small);
-    --component-tab-content-padding: var(--spacing-large);
     --component-tab-padding-large: var(--spacing-2x-large);
     --component-tab-padding-medium: var(--spacing-large);
     --component-tab-padding-small: var(--spacing-small);
+
+    /* table */
     --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);
+
+    /* tag */
     --component-tag-border-radius-circle: var(--radii-full);
     --component-tag-border-radius-square: var(--radii-small);
     --component-tag-padding-large: var(--spacing-small);
@@ -388,11 +436,156 @@
     --component-tag-size-large: var(--sizing-large);
     --component-tag-size-medium: var(--sizing-medium);
     --component-tag-size-small: var(--sizing-small);
+
+    /* toast */
     --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-toast-z-index: 9000;
+
+    /* tooltip */
     --component-tooltip-border-radius: var(--radii-small);
     --component-tooltip-padding: var(--spacing-x-small);
     --component-tooltip-padding-h: var(--spacing-medium);
+    --component-tooltip-z-index: 7000;
+}
+
+/* Default Theme (Blue Light) */
+:root {
+    --base-background-app: var(--neutral-light-1);
+    --base-background-component: var(--neutral-light-0);
+    --base-background-hover: var(--neutral-light-2);
+    --base-background-border: var(--neutral-light-3);
+    --base-background-active: var(--neutral-light-4);
+    --base-content--: var(--neutral-dark-0);
+    --base-content-inverse: var(--neutral-white);
+    --base-content-light: var(--neutral-dark-1);
+    --base-content-lighter: var(--neutral-dark-3);
+    --base-content-lightest: var(--neutral-dark-5);
+    --base-shadow: 0 2px 6px var(--neutral-black-translucent);
+    --primary-background-app: var(--blue-light-1);
+    --primary-background-component: var(--blue-light-0);
+    --primary-background-hover: var(--blue-light-2);
+    --primary-background-active: var(--blue-light-3);
+    --primary-background-border: var(--blue-light-4);
+    --primary-content--: var(--blue--);
+    --primary-content-inverse: var(--neutral-white);
+    --primary-content-hover: var(--blue-dark-7);
+    --primary-content-active: var(--blue-dark-6);
+    --secondary-background-app: var(--teal-light-1);
+    --secondary-background-component: var(--teal-light-0);
+    --secondary-background-hover: var(--teal-light-2);
+    --secondary-background-border: var(--teal-light-3);
+    --secondary-background-active: var(--teal-light-4);
+    --secondary-content--: var(--teal--);
+    --secondary-content-inverse: var(--neutral-black);
+    --secondary-content-hover: var(--teal-dark-7);
+    --secondary-content-active: var(--teal-dark-6);
+    --success-background-app: var(--green-light-1);
+    --success-background-component: var(--green-light-0);
+    --success-background-hover: var(--green-light-2);
+    --success-background-border: var(--green-light-3);
+    --success-background-active: var(--green-light-4);
+    --success-content--: var(--green--);
+    --success-content-inverse: var(--neutral-black);
+    --success-content-hover: var(--green-dark-7);
+    --success-content-active: var(--green-dark-6);
+    --warning-background-app: var(--yellow-light-1);
+    --warning-background-component: var(--yellow-light-0);
+    --warning-background-hover: var(--yellow-light-2);
+    --warning-background-border: var(--yellow-light-3);
+    --warning-background-active: var(--yellow-light-4);
+    --warning-content--: var(--yellow--);
+    --warning-content-inverse: var(--neutral-black);
+    --warning-content-hover: var(--yellow-dark-7);
+    --warning-content-active: var(--yellow-dark-6);
+    --error-background-app: var(--red-light-1);
+    --error-background-component: var(--red-light-0);
+    --error-background-hover: var(--red-light-2);
+    --error-background-border: var(--red-light-3);
+    --error-background-active: var(--red-light-4);
+    --error-content--: var(--red--);
+    --error-content-inverse: var(--neutral-white);
+    --error-content-hover: var(--red-dark-7);
+    --error-content-active: var(--red-dark-6);
+    --help-background-app: var(--indigo-light-1);
+    --help-background-component: var(--indigo-light-0);
+    --help-background-hover: var(--indigo-light-2);
+    --help-background-active: var(--indigo-light-3);
+    --help-background-border: var(--indigo-light-4);
+    --help-content--: var(--indigo--);
+    --help-content-inverse: var(--neutral-white);
+    --help-content-hover: var(--indigo-dark-7);
+    --help-content-active: var(--indigo-dark-6);
+    --component-appbar-background: var(--base-background-component);
+    --component-appbar-color: var(--base-content--);
+    --component-appbar-border-color: var(--base-background-border);
+    --component-appbar-border-width: var(--component-sidebar-border-width);
+    --component-appbar-border-radius: var(--component-sidebar-border-radius);
+    --component-appbar-inner-border-width: var(
+        --component-sidebar-border-width
+    );
+    --component-checkbox-background: var(--base-background-component);
+    --component-checkbox-color: var(--base-content--);
+    --component-checkbox-border-color: var(--base-content--);
+    --component-checkbox-accent: var(--primary-content--);
+    --component-dialog-background: var(--base-background-component);
+    --component-dialog-color: var(--base-content--);
+    --component-dialog-border-color: var(--base-background-border);
+    --component-dialog-hover-background: var(--base-background-hover);
+    --component-dialog-accent: var(--primary-content--);
+    --component-dialog-shadow: var(--base-shadow);
+    --component-drawer-background: var(--base-background-component);
+    --component-drawer-color: var(--base-content--);
+    --component-drawer-border-color: var(--base-background-border);
+    --component-drawer-hover-background: var(--base-background-hover);
+    --component-input-background: var(--base-background-app);
+    --component-input-background-disabled: var(--base-background-component);
+    --component-input-color: var(--base-content--);
+    --component-input-border-color: var(--base-background-border);
+    --component-input-accent: var(--primary-content--);
+    --component-input-label-color: var(--base-content-light);
+    --component-input-icon-color: var(--base-content-lighter);
+    --component-input-error-color: var(--error-content--);
+    --component-input-error-background: var(--error-background-component);
+    --component-input-error-border-color: var(--error-background-border);
+    --component-menu-background: var(--base-background-component);
+    --component-menu-color: var(--base-content--);
+    --component-menu-border-color: var(--base-background-border);
+    --component-menu-hover-background: var(--base-background-hover);
+    --component-menu-shadow: var(--base-shadow);
+    --component-panel-background: var(--base-background-component);
+    --component-panel-color: var(--base-content--);
+    --component-panel-expanded-background: var(--base-background-app);
+    --component-panel-accent: var(--primary-content--);
+    --component-panel-active-border: var(--base-background-active);
+    --component-panel-accent-hover-background: var(--primary-background-active);
+    --component-panel-hover-background: var(--base-background-hover);
+    --component-radio-color: var(--base-content--);
+    --component-radio-accent: var(--primary-content--);
+    --component-select-background: var(--base-background-app);
+    --component-select-color: var(--base-content--);
+    --component-select-border-color: var(--base-background-border);
+    --component-select-accent: var(--primary-content--);
+    --component-select-accent-contrast: var(--base-background-component);
+    --component-select-label-color: var(--base-content-light);
+    --component-select-hover-background: var(--base-background-hover);
+    --component-select-shadow: var(--base-shadow);
+    --component-select-error-color: var(--error-content--);
+    --component-select-error-background: var(--error-background-component);
+    --component-select-error-border-color: var(--error-background-border);
+    --component-table-color: var(--base-content--);
+    --component-table-border-color: var(--base-background-border);
+    --component-table-hover-background: var(--base-background-hover);
+    --component-table-active-background: var(--base-background-active);
+    --component-table-color-light: var(--base-content-lightest);
+    --component-tabs-background: var(--base-background-component);
+    --component-tabs-color: var(--base-content--);
+    --component-tabs-border-color: var(--base-background-border);
+    --component-tabs-accent: var(--primary-content--);
+    --component-tabs-font-family: var(--font-family-body);
+    --component-slider-width: 129px;
+    --font-family-header: "Lexend", sans-serif;
+    --font-family-body: "Lexend", sans-serif;
 }