feat: new coloring system

Author: Rikarin

apps/web/src/app/docs/components/colors/colors.component.html

@@ -1,6 +1,7 @@
 @for (color of colors; track color) {
   <div class="color">
     <div class="title">{{ color }}</div>
+
     @for (token of tokens; track token) {
       <div class="token" [style]="getVariable(color, token)" #element>
         <span>{{ token }}</span>

apps/web/src/app/docs/components/colors/colors.component.ts

@@ -8,7 +8,7 @@ import { Component } from '@angular/core';
   styleUrl: './colors.component.scss'
 })
 export class ColorsComponent {
-  colors = ['primary', 'primary-alt', 'secondary', 'success', 'error', 'info', 'warning', 'dark'];
+  colors = ['primary', 'primary-alt', 'secondary', 'success', 'error', 'info', 'warning', 'background'];
   tokens = [
     100, 130, 160, 200, 230, 260, 300, 330, 345, 360, 400, 430, 460, 500, 530, 560, 600, 630, 660, 700, 730, 760, 800,
     830, 860, 900
@@ -19,7 +19,6 @@ export class ColorsComponent {
   }
 
   getColor(element: HTMLElement) {
-    // console.log(getComputedStyle(element).getPropertyValue('background-color'));
     return getComputedStyle(element).getPropertyValue('background-color').replace('oklch(', '').replace(')', '');
   }
 }

apps/web/src/app/docs/components/example/example.scss

@@ -14,7 +14,7 @@
   border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px;
 
-  background-color: var(--color-bg-tertiary);
+  background-color: var(--color-bg-secondary-alt);
 
   .x-icon {
     font-size: 20px;
@@ -38,7 +38,7 @@
 }
 
 xui-card {
-  background-color: var(--color-bg-floating);
+  background-color: var(--color-bg-secondary);
 }
 
 code {

apps/web/src/styles.scss

@@ -1,6 +1,5 @@
 @use './highlightjs';
 @use '@xui/theme-default';
-
 //  with (
 //  $enable-rounded: true,
 //  $banner-stamp-border-radius: 20px,
@@ -12,8 +11,6 @@
 
 @include theme-default.theme();
 
-// end user should be able to change swatches/colors but the overall theme such as border-radius should be compile time
-
 code {
   font-family: Consolas, Monospaced, sans-serif;
   font-size: 10pt;

apps/web/src/themes/xui-dark.theme.scss

@@ -5,8 +5,7 @@ $theme: xui.define-dark-theme(
     color: (
       primary: xui.define-palette(xui.generate-palette(55.88% 0.154 252.84)),
       primary-alt: xui.define-palette(xui.$purple-palette),
-      secondary: xui.define-palette(xui.$orange-palette),
-      dark: xui.define-palette(xui.$dark-palette)
+      secondary: xui.define-palette(xui.$orange-palette)
     )
   )
 );

libs/theme-core/src/theming/theming.scss

@@ -82,6 +82,7 @@
       success: map.get($color, success) or define-palette(theme.$green-palette),
       warning: map.get($color, warning) or define-palette(theme.$orange-palette),
       error: map.get($color, error) or define-palette(theme.$red-palette),
+      background: map.get($color, error) or define-palette(theme.$background-palette),
       bg: map.get($color, bg) or define-background-palette($default-background)
     )
   );

libs/theme-core/src/theming/xui.theme.scss

@@ -4,13 +4,12 @@ $dark-primary-text: 0 0 0;
 $light-primary-text: 89.7% 0.011 243.67;
 
 $background-dark-palette: (
-  primary: 33.66% 0.011 236.92,
-  secondary: 31.03% 0.011 248.19,
-  secondary-alt: 28.58% 0.01 242.05,
-  tertiary: 25.74% 0.012 248.29,
-  accent: 43.95% 0.01 248.07,
-  floating: 20.56% 0.011 242.31,
-
+  primary: var(--color-background-600-lch),
+  secondary: var(--color-background-630-lch),
+  secondary-alt: var(--color-background-660-lch),
+  tertiary: var(--color-background-700-lch),
+  accent: var(--color-background-530-lch),
+  floating: var(--color-background-800-lch),
   contrast: (
     primary: $light-primary-text,
     secondary: $light-primary-text,
@@ -22,19 +21,19 @@ $background-dark-palette: (
 );
 
 $background-light-palette: (
-  primary: 100% 0 0,
-  secondary: 96.4% 0.003 264.54,
-  secondary-alt: 94.48% 0.003 247.86,
-  tertiary: 92.12% 0.005 258.33,
-  accent: 55.47% 0.022 253.46,
-  floating: 100% 0 0,
+  primary: white,
+  secondary: var(--color-background-130-lch),
+  secondary-alt: var(--color-background-160-lch),
+  tertiary: var(--color-background-200-lch),
+  accent: var(--color-background-430-lch),
+  floating: var(--color-background-500-lch),
   contrast: (
     primary: $dark-primary-text,
     secondary: $dark-primary-text,
     secondary-alt: $dark-primary-text,
     tertiary: $dark-primary-text,
-    accent: $dark-primary-text,
-    floating: $dark-primary-text
+    accent: $light-primary-text,
+    floating: $light-primary-text
   )
 );
 
@@ -54,4 +53,4 @@ $red-palette: palette.generate-palette(58.07% 0.215 31.56);
 $green-palette: palette.generate-palette(54.27% 0.134 153.22);
 $orange-palette: palette.generate-palette(56.53% 0.13 61.8);
 $purple-palette: palette.generate-palette(55.68% 0.176 293.4);
-$dark-palette: palette.generate-palette(43.19% 0.011 236.92);
+$background-palette: palette.generate-palette(43.19% 0.011 236.92);

libs/theme-default/src/date-picker/date-picker.scss

@@ -9,7 +9,7 @@
 
   .x-datepicker {
     @include core.focusable();
-    @include input-base.input($border-radius);
+    @include input-base.input($border-radius, $color-variable);
 
     .x-icon {
       font-size: 20px;

libs/theme-default/src/date-picker/variables.scss

@@ -1 +1,2 @@
 $border-radius: 4px !default;
+$color-variable: --datepicker-color !default;

libs/theme-default/src/input/input.scss

@@ -5,7 +5,7 @@
 @mixin theme() {
   .x-input {
     @include core.focusable-within();
-    @include input-base.input($border-radius);
+    @include input-base.input($border-radius, $color-variable);
     @include input-base.error();
   }
 }

libs/theme-default/src/input/variables.scss

@@ -1 +1,2 @@
 $border-radius: 3px !default;
+$color-variable: --input-color !default;

libs/theme-default/src/mixins/input-base.scss

@@ -1,11 +1,12 @@
 @use '@xui/theme-core' as core;
 
-@mixin input($border-radius) {
+@mixin input($border-radius, $color-var) {
   max-height: 40px;
   display: flex;
   gap: 8px;
   align-items: center;
   box-sizing: border-box;
+  background-color: var(#{$color-var});
 
   @include core.border-radius($border-radius);
 
@@ -35,18 +36,20 @@
   }
 
   &-light {
-    background-color: var(--color-bg-secondary);
+    #{$color-var}: var(--color-background-560);
 
     input {
+      // TODO
       -webkit-text-fill-color: var(--color-bg-secondary-contrast);
       caret-color: var(--color-bg-secondary-contrast);
     }
   }
 
   &-dark {
-    background-color: var(--color-bg-tertiary);
+    #{$color-var}: var(--color-background-900);
 
     input {
+      // TODO
       -webkit-text-fill-color: var(--color-bg-tertiary-contrast);
       caret-color: var(--color-bg-tertiary-contrast);
     }