@ecopages/radiant-themes 0.2.0 → 0.2.2

package/dist/compiled/themes/github/compact.css

@@ -28,17 +28,20 @@
   --font-weight-semibold: var(--weight-semibold);
   --opacity-disabled: var(--opacity-disabled);
   --opacity-muted: var(--opacity-muted);
-  --color-info-container: var(--info-container);
-  --color-on-info-container: var(--on-info-container);
+  --color-primary: var(--primary);
+  --color-primary-container: var(--primary-container);
+  --color-on-primary-container: var(--on-primary-container);
+  --color-error: var(--error);
   --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);
   --spacing-2: var(--space-2);
   --spacing-3: var(--space-3);
+  --spacing-control-x: var(--space-control-x);
   --radius-none: var(--border-radius-none);
   --radius-xs: var(--border-radius-xs);
+  --radius-xl: var(--border-radius-xl);
   --radius-control: var(--radius-control);
   --radius-container: var(--radius-container);
   --radius-pill: var(--radius-pill);
@@ -251,6 +254,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;
 }
@@ -262,32 +273,60 @@
   --color-github-canvas: #ffffff;
   --color-github-subtle: #f6f8fa;
   --color-github-muted: #eaeef2;
+  --color-github-overlay: #ffffff;
   --color-github-border: #d1d9e0;
   --color-github-border-strong: #8c959f;
   --color-github-fg: #1f2328;
   --color-github-muted-fg: #59636e;
   --color-github-blue: #0969da;
   --color-github-blue-light: #54aeff;
+  --color-github-accent-subtle: #ddf4ff;
+  --color-github-accent-on-subtle: #0550ae;
   --color-github-green: #1a7f37;
   --color-github-red: #cf222e;
+  --color-github-danger-fg: #d1242f;
   --color-github-orange: #bc4c00;
   --color-github-purple: #8250df;
+  --color-github-button-bg: #f6f8fa;
+  --color-github-button-hover: #eff2f5;
+  --color-github-button-active: #e6eaef;
+  --color-github-button-primary: #1f883d;
+  --color-github-button-primary-hover: #1c8139;
+  --color-github-button-primary-active: #197935;
+  --color-github-transparent-hover: rgb(129 139 152 / 0.15);
+  --color-github-transparent-selected: rgb(129 139 152 / 0.2);
+  --color-github-track: #e6eaef;
+  --color-github-knob-border: #818b98;
 }
 :where(.dark), :root.dark[data-rui-theme='github'] {
   --color-github-white: #f0f6fc;
   --color-github-canvas: #0d1117;
   --color-github-subtle: #151b23;
   --color-github-muted: #212830;
+  --color-github-overlay: #151b23;
   --color-github-border: #3d444d;
   --color-github-border-strong: #6e7681;
   --color-github-fg: #f0f6fc;
   --color-github-muted-fg: #9198a1;
   --color-github-blue: #1f6feb;
   --color-github-blue-light: #4493f8;
+  --color-github-accent-subtle: #121d2f;
+  --color-github-accent-on-subtle: #4493f8;
   --color-github-green: #238636;
   --color-github-red: #da3633;
+  --color-github-danger-fg: #ff6a61;
   --color-github-orange: #db6d28;
   --color-github-purple: #a371f7;
+  --color-github-button-bg: #212830;
+  --color-github-button-hover: #262c36;
+  --color-github-button-active: #2a313c;
+  --color-github-button-primary: #238636;
+  --color-github-button-primary-hover: #1f7a31;
+  --color-github-button-primary-active: #1c6e2d;
+  --color-github-transparent-hover: rgb(101 108 118 / 0.2);
+  --color-github-transparent-selected: rgb(101 108 118 / 0.24);
+  --color-github-track: #2a313c;
+  --color-github-knob-border: #656c76;
 }
 :where(:root),
 :root[data-rui-theme='github'] {
@@ -332,24 +371,12 @@
     --gray-900: color-mix(in oklab, var(--color-github-canvas), var(--color-github-fg) 94%);
   }
   --gray-950: var(--color-github-fg);
-  --primary: var(--color-github-green);
+  --primary: var(--color-github-blue);
   --on-primary: white;
-  --primary-light: var(--color-github-green);
-  @supports (color: color-mix(in lab, red, red)) {
-    --primary-light: color-mix(in oklab, var(--color-github-green), white 12%);
-  }
-  --primary-dark: var(--color-github-green);
-  @supports (color: color-mix(in lab, red, red)) {
-    --primary-dark: color-mix(in oklab, var(--color-github-green), black 24%);
-  }
-  --primary-container: var(--color-github-green);
-  @supports (color: color-mix(in lab, red, red)) {
-    --primary-container: color-mix(in oklab, var(--color-github-green), white 90%);
-  }
-  --on-primary-container: var(--color-github-green);
-  @supports (color: color-mix(in lab, red, red)) {
-    --on-primary-container: color-mix(in oklab, var(--color-github-green), black 60%);
-  }
+  --primary-light: var(--color-github-blue-light);
+  --primary-dark: #0550ae;
+  --primary-container: var(--color-github-accent-subtle);
+  --on-primary-container: var(--color-github-accent-on-subtle);
   --secondary: var(--color-github-subtle);
   --on-secondary: var(--color-github-fg);
   --secondary-light: var(--color-github-white);
@@ -436,7 +463,7 @@
     --on-warning-container: color-mix(in oklab, var(--color-github-orange), black 60%);
   }
   --neutral: var(--color-github-muted-fg);
-  --surface: var(--color-github-subtle);
+  --surface: var(--color-github-canvas);
   --on-surface: var(--color-github-fg);
   --surface-container-lowest: var(--color-github-canvas);
   --on-surface-container-lowest: var(--color-github-fg);
@@ -512,12 +539,12 @@
     --gray-900: color-mix(in oklab, var(--color-github-canvas), white 6%);
   }
   --gray-950: var(--color-github-canvas);
-  --primary: var(--color-github-green);
+  --primary: var(--color-github-blue);
   --on-primary: white;
-  --primary-light: #238636;
-  --primary-dark: #116329;
-  --primary-container: #0f3d1e;
-  --on-primary-container: #aff5b4;
+  --primary-light: var(--color-github-blue-light);
+  --primary-dark: #1158c7;
+  --primary-container: var(--color-github-accent-subtle);
+  --on-primary-container: var(--color-github-accent-on-subtle);
   --secondary: var(--color-github-muted);
   --on-secondary: var(--color-github-fg);
   --secondary-light: var(--color-github-border);
@@ -545,7 +572,7 @@
   --warning-container: #4d2d00;
   --on-warning-container: #ffdf8b;
   --neutral: var(--color-github-muted-fg);
-  --surface: var(--color-github-subtle);
+  --surface: var(--color-github-canvas);
   --on-surface: var(--color-github-fg);
   --surface-container-lowest: var(--color-github-canvas);
   --on-surface-container-lowest: var(--color-github-fg);
@@ -580,37 +607,60 @@
 }
 :root,
 :root[data-rui-theme='github'] {
-  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-  --font-heading: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
+  --font-heading: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
   --rui-border-alpha: 100%;
-  --border-radius-xs: 0.25rem;
+  --border-radius-xs: 0.1875rem;
   --border-radius-sm: 0.375rem;
-  --border-radius-md: 0.5rem;
+  --border-radius-md: 0.375rem;
   --border-radius-lg: 0.75rem;
-  --border-radius-xl: 1rem;
-  --border-radius-2xl: 1.25rem;
+  --border-radius-xl: 0.75rem;
+  --border-radius-2xl: 1rem;
   --border-radius-3xl: 1.5rem;
   --radius-control: var(--border-radius-sm);
   --radius-container: var(--border-radius-md);
+  --size-control-sm: 1.75rem;
+  --size-control-md: 2rem;
+  --size-control-lg: 2.5rem;
 }
 @layer components {
-  :root.dark .rui-button--destructive {
-    background-color: #da3633;
-    color: #ffffff;
-  }
-  :root.dark .rui-button--destructive:hover:not(:disabled) {
-    background-color: #b62324;
-  }
-  :root.dark .rui-button--destructive:active:not(:disabled) {
-    background-color: #a40e26;
-  }
   :root rui-tabs {
     --rui-tabs-indicator-color: #fd8c73;
   }
   :root.dark rui-tabs {
     --rui-tabs-indicator-color: #f78166;
   }
+  :root .rui-meter {
+    --rui-meter-fill-color: var(--color-github-green);
+  }
+  :root .rui-switch {
+    --rui-switch-width: 3rem;
+    --rui-switch-height: 1.5rem;
+    --rui-switch-thumb-size: 1.5rem;
+    --rui-switch-track: var(--color-github-track);
+    --rui-switch-track-hover: var(--color-github-button-active);
+    --rui-switch-track-on-hover: var(--primary-dark);
+    --rui-switch-thumb: var(--color-github-canvas);
+    --rui-switch-thumb-on: var(--color-github-canvas);
+  }
+  :root .rui-switch__track {
+    border-radius: var(--radius-control);
+    padding: 0px;
+  }
+  :root .rui-switch__thumb,
+	:root .rui-switch__input:checked + .rui-switch__track .rui-switch__thumb {
+    border-radius: var(--radius-control);
+    border: 1px solid var(--color-github-knob-border);
+  }
+  :root .rui-switch__thumb {
+    left: 0;
+  }
+  :root .rui-switch__input:checked + .rui-switch__track .rui-switch__thumb {
+    right: 0;
+    left: auto;
+    border-color: var(--primary);
+  }
   :root .rui-button {
     border-radius: var(--radius-control);
     border-style: var(--tw-border-style);
@@ -621,38 +671,175 @@
     --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--outline {
+    border-color: var(--color-github-border);
+    background-color: var(--color-github-button-bg);
+    color: var(--color-github-fg);
+    box-shadow: 0 1px 0 0 rgb(31 35 40 / 0.04);
+  }
+  :root .rui-button--outline:hover:not(:disabled) {
+    background-color: var(--color-github-button-hover);
+  }
+  :root .rui-button--outline:active:not(:disabled) {
+    background-color: var(--color-github-button-active);
+  }
+  :root .rui-button--filled,
+	:root .rui-button--primary {
+    border-color: rgb(31 35 40 / 0.15);
+    background-color: var(--color-github-button-primary);
+    background-image: none;
+    color: #ffffff;
+    box-shadow: 0 1px 0 0 rgb(31 35 40 / 0.1);
+  }
+  :root .rui-button--filled:hover:not(:disabled),
+	:root .rui-button--primary:hover:not(:disabled) {
+    background-color: var(--color-github-button-primary-hover);
+  }
+  :root .rui-button--filled:active:not(:disabled),
+	:root .rui-button--primary:active:not(:disabled) {
+    background-color: var(--color-github-button-primary-active);
+  }
+  :root .rui-button--destructive {
+    border-color: var(--color-github-border);
+    background-color: var(--color-github-button-bg);
+    background-image: none;
+    color: var(--color-github-danger-fg);
+  }
+  :root .rui-button--destructive:hover:not(:disabled) {
+    border-color: rgb(31 35 40 / 0.15);
+    background-color: #a40e26;
+    color: #ffffff;
+  }
+  :root .rui-button--destructive:active:not(:disabled) {
+    background-color: #8b0820;
+    color: #ffffff;
+  }
+  :root .rui-button--ghost {
+    color: var(--color-github-fg);
+  }
+  :root .rui-button--ghost:hover:not(:disabled) {
+    background-color: var(--color-github-transparent-hover);
+  }
+  :root .rui-button--ghost:active:not(:disabled) {
+    background-color: var(--color-github-transparent-selected);
+  }
+  :root .rui-pagination__link[aria-current='page'],
+	:root .rui-pagination__link[aria-current='page']:hover:not(:disabled) {
+    border-color: transparent;
+    background-color: var(--primary);
+    color: var(--on-primary);
+    box-shadow: 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);
+  :root .rui-select__control {
+    background-color: var(--color-github-button-bg);
+  }
+  :root .rui-select__control:hover:not(:disabled) {
+    background-color: var(--color-github-button-hover);
   }
   :root .rui-checkbox__control {
     border-radius: var(--radius-xs);
-    border-color: var(--color-border);
     background-color: var(--color-surface);
     border-color: var(--rui-control-border-color);
   }
+  :root .rui-radio__control {
+    border-color: var(--rui-control-border-color);
+  }
+  :root .rui-radio__input:checked + .rui-radio__control {
+    border-width: 0.3125rem;
+    background-color: var(--on-primary);
+  }
+  :root .rui-radio__input:checked + .rui-radio__control::after {
+    display: none;
+  }
   :root .rui-dialog__surface,
-	:root .rui-popover-host,
-	:root .rui-select__listbox,
+	:root .rui-hover-card__content,
 	:root .rui-calendar {
-    border-radius: var(--radius-container);
+    border-radius: var(--radius-xl);
     border-style: var(--tw-border-style);
     border-width: 1px;
     border-color: var(--color-border);
-    background-color: var(--color-surface);
     --tw-shadow: var(--shadow-overlay);
     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-github-overlay);
+  }
+  :root .rui-popover {
+    --rui-popover-radius: var(--border-radius-lg);
+    --rui-popover-surface: var(--color-github-overlay);
+    --rui-popover-border-color: var(--color-github-border);
+    --rui-popover-shadow: 0 6px 12px -3px rgb(37 41 46 / 0.04), 0 6px 18px 0 rgb(37 41 46 / 0.12);
+  }
+  :root .rui-tooltip__content {
+    --rui-tooltip-surface: #25292e;
+    --rui-tooltip-color: #ffffff;
+    --rui-tooltip-radius: var(--border-radius-sm);
+    --rui-tooltip-padding-x: 0.5rem;
+    --rui-tooltip-padding-y: 0.25rem;
+  }
+  :root.dark .rui-tooltip__content {
+    --rui-tooltip-surface: #3d444d;
+  }
+  :root .rui-select__listbox .rui-listbox,
+	:root .rui-combobox__listbox .rui-listbox {
+    background-color: transparent;
+    padding: 0px;
+  }
+  :root .rui-menu-button__menu,
+	:root .rui-menubar__menu,
+	:root .rui-select__listbox,
+	:root .rui-combobox__listbox {
+    border-radius: var(--radius-xl);
+    border-style: var(--tw-border-style);
+    border-width: 0px;
+    padding: var(--spacing-2);
+    background-color: var(--color-github-overlay);
+    box-shadow: 0 0 0 1px var(--color-github-border),
+			0 6px 12px -3px rgb(37 41 46 / 0.04),
+			0 6px 18px 0 rgb(37 41 46 / 0.12);
+  }
+  :root .rui-listbox__option,
+	:root .rui-menu-button__item,
+	:root .rui-menubar__menu-item {
+    border-radius: var(--radius-control);
+  }
+  :root .rui-listbox__option:hover:not([aria-disabled='true']),
+	:root .rui-listbox__option[data-active]:not([aria-disabled='true']),
+	:root .rui-menu-button__item:hover:not([aria-disabled='true']),
+	:root .rui-menubar__menu-item:hover:not([aria-disabled='true']) {
+    background-color: var(--color-github-transparent-hover);
+  }
+  :root .rui-listbox__option[aria-selected='true']:not([aria-disabled='true']),
+	:root .rui-listbox__option[aria-selected='true']:focus-visible,
+	:root .rui-menu-button__item[aria-checked='true'],
+	:root .rui-sidebar__menu-button[aria-current='page'],
+	:root .rui-sidebar__menu-button--active,
+	:root .rui-tree__node[aria-selected='true'] {
+    border-radius: var(--radius-control);
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+    background-color: var(--color-github-transparent-selected);
+    background-image: none;
+    color: var(--color-github-fg);
+  }
+  :root .rui-listbox__option[aria-selected='true'] .rui-listbox__option-indicator {
+    color: var(--color-github-fg);
+  }
+  :root .rui-listbox__option[aria-selected='true'][data-active]:not([aria-disabled='true']) {
+    --tw-ring-color: transparent;
   }
   :root rui-tabs[variant='boxed'] {
     overflow: visible;
@@ -674,7 +861,10 @@
   }
   :root rui-tabs[variant='boxed'] .rui-tabs__tab {
     border-radius: var(--radius-none);
-    color: var(--color-on-surface-container-low);
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
+    color: var(--color-on-surface);
+    opacity: 100%;
   }
   :root rui-tabs[variant='boxed'] .rui-tabs__tab[aria-selected='true'] {
     --tw-font-weight: var(--font-weight-semibold);
@@ -691,18 +881,73 @@
     border-color: var(--color-border);
     background-color: var(--color-surface);
   }
-  :root .rui-listbox__option[aria-selected='true'],
-	:root .rui-menu-button__item[aria-checked='true'],
-	:root .rui-sidebar__menu-button--active {
-    border-radius: var(--radius-control);
-    background-color: var(--color-info-container);
-    color: var(--color-on-info-container);
+  :root .rui-badge {
+    border-radius: var(--radius-pill);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--color-border);
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+  }
+  :root .rui-badge--filled {
+    border-color: var(--color-primary);
+    background-color: transparent;
+    color: var(--color-primary);
   }
-  :root .rui-badge,
-	:root .rui-chip,
-	:root .rui-pagination__link {
+  :root .rui-badge--destructive {
+    border-color: var(--color-error);
+    background-color: transparent;
+    color: var(--color-github-danger-fg);
+  }
+  :root .rui-badge--muted {
+    background-color: transparent;
+    color: var(--color-github-muted-fg);
+  }
+  :root .rui-chip {
     border-radius: var(--radius-pill);
   }
+  :root .rui-feed__article {
+    border-radius: var(--radius-container);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--color-border);
+    background-color: var(--color-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);
+  }
+  :root .rui-treegrid {
+    border-radius: var(--radius-container);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--color-border);
+    background-color: var(--color-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);
+    --rui-treegrid-indent: 0.875rem;
+  }
+  :root .rui-treegrid__cell {
+    border-style: var(--tw-border-style);
+    border-width: 0px;
+    background-color: transparent;
+    padding-inline: var(--spacing-control-x);
+    padding-block: var(--spacing-2);
+    color: var(--color-on-surface);
+  }
+  :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: var(--color-surface-container-low);
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+  }
+  :root .rui-treegrid__row:not(.rui-treegrid__row--header):hover .rui-treegrid__cell:not([aria-selected='true']) {
+    background-color: var(--color-surface-container-low);
+  }
+  :root .rui-treegrid__cell[aria-selected='true'] {
+    background-color: var(--color-primary-container);
+    color: var(--color-on-primary-container);
+  }
 }
 :root {
   --space-1: calc(0.125rem * var(--rui-density));