@ecopages/radiant-themes 0.2.0 → 0.2.2

package/dist/compiled/themes/vscode.css

@@ -29,11 +29,14 @@
   --opacity-muted: var(--opacity-muted);
   --color-primary-container: var(--primary-container);
   --color-on-primary-container: var(--on-primary-container);
-  --color-surface: var(--surface);
   --color-on-surface: var(--on-surface);
-  --color-surface-container-low: var(--surface-container-low);
+  --color-on-surface-container-low: var(--on-surface-container-low);
   --color-border: var(--border);
-  --radius-xs: var(--border-radius-xs);
+  --spacing-1: var(--space-1);
+  --spacing-2: var(--space-2);
+  --radius-none: var(--border-radius-none);
+  --radius-sm: var(--border-radius-sm);
+  --radius-full: var(--border-radius-full);
   --radius-control: var(--radius-control);
   --radius-container: var(--radius-container);
   --radius-pill: var(--radius-pill);
@@ -246,6 +249,14 @@
   --radius-container: var(--border-radius-lg);
   --radius-pill: var(--border-radius-full);
 }
+@layer components {
+  :root .rui-input-group .rui-input {
+    border-width: 0;
+    border-radius: 0;
+    background-color: transparent;
+    box-shadow: none;
+  }
+}
 :where(:root) {
   color-scheme: light;
 }
@@ -256,31 +267,71 @@
   --color-vscode-canvas: #ffffff;
   --color-vscode-subtle: #f8f8f8;
   --color-vscode-muted: #ececec;
-  --color-vscode-border: #cecece;
+  --color-vscode-border: #e5e5e5;
   --color-vscode-border-strong: #808080;
   --color-vscode-fg: #3b3b3b;
   --color-vscode-muted-fg: #616161;
-  --color-vscode-blue: #006bb3;
+  --color-vscode-inactive-fg: #6e6e6e;
+  --color-vscode-blue: #005fb8;
+  --color-vscode-blue-hover: #0258a8;
+  --color-vscode-blue-active: #004c94;
   --color-vscode-blue-light: #3794ff;
   --color-vscode-green: #16825d;
   --color-vscode-red: #d32f2f;
   --color-vscode-orange: #a15c00;
   --color-vscode-purple: #af00db;
+  --color-vscode-input: #ffffff;
+  --color-vscode-checkbox: #f8f8f8;
+  --color-vscode-widget: #f8f8f8;
+  --color-vscode-widget-border: #e5e5e5;
+  --color-vscode-widget-shadow: rgb(0 0 0 / 16%);
+  --color-vscode-menu: #ffffff;
+  --color-vscode-menu-border: #cecece;
+  --color-vscode-button-border: rgb(0 0 0 / 10%);
+  --color-vscode-button-secondary: #e5e5e5;
+  --color-vscode-button-secondary-hover: #cccccc;
+  --color-vscode-toolbar-hover: rgb(184 184 184 / 31%);
+  --color-vscode-list-hover: #f2f2f2;
+  --color-vscode-badge: #cccccc;
+  --color-vscode-badge-fg: #3b3b3b;
+  --color-vscode-scrollbar: rgb(100 100 100 / 40%);
+  --color-vscode-scrollbar-hover: rgb(100 100 100 / 70%);
+  --color-vscode-scrollbar-active: rgb(0 0 0 / 60%);
 }
 :where(.dark), :root.dark[data-rui-theme='vscode'] {
   --color-vscode-canvas: #1f1f1f;
   --color-vscode-subtle: #181818;
   --color-vscode-muted: #2b2b2b;
-  --color-vscode-border: #393939;
-  --color-vscode-border-strong: #6e6e6e;
+  --color-vscode-border: #2b2b2b;
+  --color-vscode-border-strong: #858585;
   --color-vscode-fg: #cccccc;
   --color-vscode-muted-fg: #9d9d9d;
+  --color-vscode-inactive-fg: #9d9d9d;
   --color-vscode-blue: #0078d4;
+  --color-vscode-blue-hover: #026ec1;
+  --color-vscode-blue-active: #005ba4;
   --color-vscode-blue-light: #4daafc;
   --color-vscode-green: #4ec9b0;
   --color-vscode-red: #f14c4c;
   --color-vscode-orange: #cca700;
   --color-vscode-purple: #c586c0;
+  --color-vscode-input: #313131;
+  --color-vscode-checkbox: #313131;
+  --color-vscode-widget: #202020;
+  --color-vscode-widget-border: #313131;
+  --color-vscode-widget-shadow: rgb(0 0 0 / 36%);
+  --color-vscode-menu: #1f1f1f;
+  --color-vscode-menu-border: #454545;
+  --color-vscode-button-border: rgb(255 255 255 / 7%);
+  --color-vscode-button-secondary: #313131;
+  --color-vscode-button-secondary-hover: #3c3c3c;
+  --color-vscode-toolbar-hover: rgb(90 93 94 / 31%);
+  --color-vscode-list-hover: #2a2d2e;
+  --color-vscode-badge: #616161;
+  --color-vscode-badge-fg: #f8f8f8;
+  --color-vscode-scrollbar: rgb(121 121 121 / 40%);
+  --color-vscode-scrollbar-hover: rgb(100 100 100 / 70%);
+  --color-vscode-scrollbar-active: rgb(191 191 191 / 40%);
 }
 :where(:root), :root[data-rui-theme='vscode'] {
   --gray-50: var(--color-vscode-canvas);
@@ -571,10 +622,11 @@
   --background-code: var(--color-vscode-subtle);
   --on-background-code: var(--color-vscode-fg);
 }
-:root, :root[data-rui-theme='vscode'] {
-  --font-sans: 'Segoe UI', system-ui, sans-serif;
-  --font-heading: 'Segoe UI', system-ui, sans-serif;
-  --font-mono: 'Cascadia Code', Consolas, Menlo, Monaco, 'Courier New', monospace;
+:root,
+:root[data-rui-theme='vscode'] {
+  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe WPC', 'Segoe UI', system-ui, Ubuntu, 'Droid Sans', sans-serif;
+  --font-heading: -apple-system, BlinkMacSystemFont, 'Segoe WPC', 'Segoe UI', system-ui, Ubuntu, 'Droid Sans', sans-serif;
+  --font-mono: Menlo, Monaco, Consolas, 'Droid Sans Mono', 'Courier New', monospace;
   --rui-border-alpha: 100%;
   --border-radius-xs: 0.125rem;
   --border-radius-sm: 0.1875rem;
@@ -583,70 +635,288 @@
   --border-radius-xl: 0.5rem;
   --border-radius-2xl: 0.75rem;
   --border-radius-3xl: 1rem;
-  --radius-control: var(--border-radius-sm);
+  --radius-control: var(--border-radius-xs);
   --radius-container: var(--border-radius-md);
+  --size-control-sm: 1.5rem;
+  --size-control-md: 1.625rem;
+  --size-control-lg: 2rem;
+  --text-control: 0.8125rem;
+  --sheen-image: none;
+}
+:root rui-tooltip {
+  --rui-tooltip-surface: var(--color-vscode-widget);
+  --rui-tooltip-color: var(--color-vscode-fg);
+  --rui-tooltip-radius: var(--border-radius-sm);
+  --rui-tooltip-shadow: 0 0 0 1px var(--color-vscode-menu-border), 0 2px 8px var(--color-vscode-widget-shadow);
 }
 @layer components {
-  :root.dark .rui-button--filled {
-    background-color: #0078d4;
-    color: #ffffff;
-  }
-  :root.dark .rui-button--filled:hover:not(:disabled) {
-    background-color: #026ec1;
-  }
-  :root.dark .rui-button--filled:active:not(:disabled),
-	:root.dark .rui-button--filled[aria-pressed='true'] {
-    background-color: #005ba4;
-  }
   :root .rui-button {
     border-radius: var(--radius-control);
     border-style: var(--tw-border-style);
     border-width: 1px;
     border-color: transparent;
-    --tw-font-weight: var(--font-weight-medium);
-    font-weight: var(--font-weight-medium);
+    --tw-font-weight: var(--font-weight-normal, 400);
+    font-weight: var(--font-weight-normal, 400);
     --tw-shadow: 0 0 #0000;
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  :root .rui-button--outline,
-	:root .rui-input,
+  :root .rui-button--filled {
+    border-color: var(--color-vscode-button-border);
+    background-color: var(--color-vscode-blue);
+    color: #ffffff;
+  }
+  :root .rui-button--filled:hover:not(:disabled) {
+    background-color: var(--color-vscode-blue-hover);
+  }
+  :root .rui-button--filled:active:not(:disabled),
+	:root .rui-button--filled[aria-pressed='true'] {
+    background-color: var(--color-vscode-blue-active);
+  }
+  :root .rui-button--outline {
+    border-color: var(--color-vscode-button-border);
+    background-color: var(--color-vscode-button-secondary);
+    color: var(--color-vscode-fg);
+  }
+  :root .rui-button--outline:hover:not(:disabled),
+	:root .rui-button--outline:active:not(:disabled) {
+    background-color: var(--color-vscode-button-secondary-hover);
+  }
+  :root .rui-button--ghost {
+    border-radius: 0.3125rem;
+  }
+  :root .rui-button--ghost:hover:not(:disabled),
+	:root .rui-button--ghost:active:not(:disabled) {
+    background-color: var(--color-vscode-toolbar-hover);
+  }
+  :root .rui-button:focus-visible,
+	:root .rui-tabs__tab:focus-visible {
+    outline: 1px solid var(--focus-ring);
+    outline-offset: 2px;
+    --tw-ring-shadow: 0 0 #0000;
+    --tw-ring-offset-shadow: 0 0 #0000;
+  }
+  :root .rui-input:focus-visible,
+	:root .rui-textarea:focus-visible,
+	:root .rui-combobox__control:focus-within,
+	:root .rui-number-field__group:focus-within,
+	:root .rui-input-group:focus-within,
+	:root .rui-select__control:focus-within {
+    outline: 1px solid var(--focus-ring);
+    outline-offset: -1px;
+    --tw-ring-shadow: 0 0 #0000;
+    --tw-ring-offset-shadow: 0 0 #0000;
+  }
+  :root .rui-input-group .rui-input:focus-visible {
+    outline: none;
+  }
+  :root .rui-input,
 	:root .rui-textarea,
+	:root .rui-combobox__control,
+	:root .rui-date-field__group,
+	:root .rui-date-range-picker__group,
+	:root .rui-input-group,
+	:root .rui-number-field__group,
+	:root rui-date-input:where(:not([data-date-field-input], [data-range-start], [data-range-end])),
 	:root .rui-select__control {
-    border-color: var(--color-border);
-    background-color: var(--color-surface);
     color: var(--color-on-surface);
     --tw-shadow: 0 0 #0000;
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     border-color: var(--rui-control-border-color);
-  }
-  :root .rui-button--outline:hover:not(:disabled),
-	:root .rui-button--ghost:hover:not(:disabled) {
-    background-color: var(--color-surface-container-low);
+    background-color: var(--color-vscode-input);
   }
   :root .rui-checkbox__control {
-    border-radius: var(--radius-xs);
-    border-color: var(--color-border);
-    background-color: var(--color-surface);
+    border-radius: var(--radius-sm);
+    border-color: var(--rui-control-border-color);
+    background-color: var(--color-vscode-checkbox);
+  }
+  :root .rui-checkbox__input:checked:not(:indeterminate):not([aria-checked='mixed']) + .rui-checkbox__control {
     border-color: var(--rui-control-border-color);
+    background-color: var(--color-vscode-checkbox);
+  }
+  :root .rui-checkbox__input:checked:not(:indeterminate):not([aria-checked='mixed']) + .rui-checkbox__control::after {
+    color: var(--color-vscode-fg);
+  }
+  :root .rui-badge {
+    border-radius: var(--radius-full);
+  }
+  :root .rui-badge--muted {
+    background-color: var(--color-vscode-badge);
+    color: var(--color-vscode-badge-fg);
+  }
+  :root .rui-listbox__option:hover:not([aria-disabled='true']):not([data-active]):not([aria-selected='true']) {
+    background-color: var(--color-vscode-list-hover);
   }
   :root .rui-listbox__option[aria-selected='true'],
 	:root .rui-menu-button__item[aria-checked='true'],
+	:root .rui-sidebar__menu-button[aria-current='page'],
 	:root .rui-sidebar__menu-button--active {
     background-color: var(--color-primary-container);
     color: var(--color-on-primary-container);
   }
   :root .rui-dialog__surface,
-	:root .rui-popover-host,
-	:root .rui-select__listbox,
+	:root .rui-popover:where(:not(.rui-popover--listbox)),
+	:root .rui-hover-card__content,
 	:root .rui-calendar {
     border-radius: var(--radius-container);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    color: var(--color-on-surface);
+    border-color: var(--color-vscode-widget-border);
+    background-color: var(--color-vscode-widget);
+    box-shadow: 0 0 8px 2px var(--color-vscode-widget-shadow);
+  }
+  :root .rui-select__listbox,
+	:root .rui-combobox__listbox {
+    border-radius: var(--radius-control);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    color: var(--color-on-surface);
+    border-color: var(--rui-control-border-color);
+    background-color: var(--color-vscode-menu);
+    box-shadow: 0 0 8px 2px var(--color-vscode-widget-shadow);
+  }
+  :root .rui-menu-button__menu,
+	:root .rui-menubar__menu {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    color: var(--color-on-surface);
+    --rui-menu-item-hover: var(--color-vscode-blue);
+    border-color: var(--color-vscode-menu-border);
+    border-radius: 0.3125rem;
+    background-color: var(--color-vscode-menu);
+    box-shadow: 0 2px 8px var(--color-vscode-widget-shadow);
+  }
+  :root .rui-menu-button__item:focus-visible:not([aria-disabled='true']),
+	:root .rui-menu-button__item[aria-expanded='true'],
+	:root .rui-menubar__menu-item:focus-visible,
+	:root .rui-menubar__menu-item[aria-expanded='true'] {
+    background-color: var(--color-vscode-blue);
+    color: #ffffff;
+    outline: none;
+    --tw-ring-shadow: 0 0 #0000;
+  }
+  :root .rui-menu-button__item[aria-haspopup='menu']::after,
+	:root .rui-menubar__menu-item[aria-haspopup='menu']::after {
+    color: inherit;
+  }
+  @media (hover: hover) and (pointer: fine) {
+    :root .rui-menu-button__item:hover:not([aria-disabled='true']),
+		:root .rui-menubar__menu-item:hover:not(:disabled):not([aria-disabled='true']) {
+      background-color: var(--color-vscode-blue);
+      color: #ffffff;
+    }
+  }
+  :root rui-tabs[variant='boxed'] {
     border-style: var(--tw-border-style);
     border-width: 1px;
     border-color: var(--color-border);
-    background-color: var(--color-surface);
-    --tw-shadow: var(--shadow-overlay);
+    --tw-shadow: 0 0 #0000;
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    background-color: var(--color-vscode-canvas);
+  }
+  :root rui-tabs[variant='boxed'] .rui-tabs__list {
+    gap: 0px;
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 1px;
+    border-color: var(--color-border);
+    padding: 0px;
+    background-color: var(--color-vscode-subtle);
+  }
+  :root rui-tabs[variant='boxed'] .rui-tabs__tab {
+    position: relative;
+    border-style: var(--tw-border-style);
+    border-width: 0px;
+    border-right-style: var(--tw-border-style);
+    border-right-width: 1px;
+    border-color: var(--color-border);
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
+    --tw-font-weight: var(--font-weight-normal, 400);
+    font-weight: var(--font-weight-normal, 400);
+    opacity: 100%;
+    height: 2.1875rem;
+    margin-bottom: -1px;
+    padding-inline: 0.625rem;
+    background-color: var(--color-vscode-subtle);
+    color: var(--color-vscode-inactive-fg);
+    transition: none;
+  }
+  :root rui-tabs[variant='boxed'] .rui-tabs__tab[aria-selected='true'] {
+    --tw-font-weight: var(--font-weight-normal, 400);
+    font-weight: var(--font-weight-normal, 400);
+    background-color: var(--color-vscode-canvas);
+    color: var(--color-vscode-fg);
+    box-shadow: inset 0 1px 0 var(--color-vscode-blue);
+  }
+  :root rui-tabs[variant='boxed'] .rui-tabs__panel {
+    background-color: var(--color-vscode-canvas);
+  }
+  :root .rui-treegrid {
+    border-radius: var(--radius-none);
+    border-style: var(--tw-border-style);
+    border-width: 0px;
+    background-color: transparent;
+    --tw-shadow: 0 0 #0000;
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    --rui-treegrid-indent: 0.75rem;
   }
+  :root .rui-treegrid__cell {
+    border-style: var(--tw-border-style);
+    border-width: 0px;
+    background-color: transparent;
+    padding-inline: var(--spacing-2);
+    padding-block: var(--spacing-1);
+  }
+  :root .rui-treegrid__row--header .rui-treegrid__cell {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 1px;
+    border-color: var(--color-border);
+    background-color: transparent;
+    padding-inline: var(--spacing-2);
+    padding-block: var(--spacing-1);
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+    color: var(--color-on-surface-container-low);
+  }
+  :root .rui-treegrid__row:not(.rui-treegrid__row--header):hover .rui-treegrid__cell:not([aria-selected='true']) {
+    background-color: var(--color-vscode-list-hover);
+  }
+  :root .rui-treegrid__cell[aria-selected='true'] {
+    background-color: var(--color-primary-container);
+    color: var(--color-on-primary-container);
+  }
+}
+@supports (-moz-appearance: none) {
+  :root,
+	:root * {
+    scrollbar-width: thin;
+    scrollbar-color: var(--color-vscode-scrollbar) transparent;
+  }
+}
+:root::-webkit-scrollbar,
+:root *::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+  background-color: transparent;
+}
+:root::-webkit-scrollbar-thumb,
+:root *::-webkit-scrollbar-thumb {
+  border-radius: 0;
+  background-color: var(--color-vscode-scrollbar);
+}
+:root::-webkit-scrollbar-thumb:hover,
+:root *::-webkit-scrollbar-thumb:hover {
+  background-color: var(--color-vscode-scrollbar-hover);
+}
+:root::-webkit-scrollbar-thumb:active,
+:root *::-webkit-scrollbar-thumb:active {
+  background-color: var(--color-vscode-scrollbar-active);
+}
+:root::-webkit-scrollbar-corner,
+:root *::-webkit-scrollbar-corner {
+  background-color: transparent;
 }
 @property --tw-border-style {
   syntax: "*";