@rt-tools/ui-kit 0.0.16 → 0.0.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rt-tools/ui-kit",
-  "version": "0.0.16",
+  "version": "0.0.19",
   "license": "Apache-2.0",
   "author": "Yauheni Krumin",
   "type": "module",

package/src/lib/ui-kit/aside/components/panel/aside-panel.component.scss

@@ -5,7 +5,7 @@ $aside: (
     host: (
         width: 33.75rem,
         box-shadow: 0 0 1rem 0 rgba(#000, 0.1),
-        background-color: var(--clr-white-100),
+        background-color: var(--rt-bg-base-base),
     ),
     header: (
         padding: 2rem,
@@ -24,12 +24,12 @@ $aside: (
     header-description: (
         font-size: 1rem,
         margin-bottom: 0.25rem,
-        color: var(--clr-black-60),
+        color: var(--rt-text-base-secondary),
     ),
     header-addition: (
         font-size: 1rem,
         margin-top: 0.25rem,
-        color: var(--clr-black-60),
+        color: var(--rt-text-base-secondary),
     ),
     header-actions: (
         margin-left: 1rem,
@@ -54,16 +54,16 @@ $aside: (
         height: 2rem,
         padding: 0.5rem,
         margin: 2rem 0 2rem 0,
-        border: 1px solid var(--clr-red-60),
+        border: 1px solid var(--rt-border-accent-danger-soft),
         border-radius: 0.375rem,
     ),
     error-box-title: (
         font-size: 1rem,
-        font-color: var(--clr-red-60),
+        font-color: var(--rt-text-accent-danger-soft),
     ),
     error-box-button: (
         font-size: 1rem,
-        font-color: var(--clr-black-100),
+        font-color: var(--rt-text-base-strong),
     ),
     tab-indicator: (
         width: 6rem,
@@ -72,7 +72,7 @@ $aside: (
         color: var(--mdc-filled-button-container-color),
     ),
     tab-badge-incorrect: (
-        color: var(--clr-red-100),
+        color: var(--rt-text-accent-danger),
     ),
 );
 
@@ -211,7 +211,7 @@ $aside: (
         top: 0;
         z-index: 1000;
         position: sticky;
-        background: var(--clr-white-100);
+        background: var(--rt-bg-base-base);
     }
 
     @include mixins.media-breakpoint-down(vars.$device-xs) {

package/src/lib/ui-kit/buttons/multi-button/rtui-multi-button.component.scss

@@ -6,7 +6,7 @@ $rtui-multibutton: (
         flex-flow: row wrap,
         radius: 8px,
         padding: 4px,
-        background-color: var(--clr-black-10),
+        background-color: var(--rt-bg-base-hover),
     ),
     action-base: (
         padding: 4px 8px,
@@ -14,21 +14,21 @@ $rtui-multibutton: (
         border: 0,
         font-size: 12px,
         font-weight: 600,
-        color: var(--clr-black-60),
+        color: var(--rt-text-base-secondary),
         background-color: transparent,
         transition: 'background-color 0.15s, color 0.15s',
         cursor: pointer,
     ),
     action-hover: (
-        color: var(--clr-black-80),
+        color: var(--rt-text-base-soft),
     ),
     action-active: (
-        color: var(--clr-black-80),
-        background-color: var(--clr-black-20),
+        color: var(--rt-text-base-soft),
+        background-color: var(--rt-bg-base-strong),
         cursor: default,
     ),
     action-focus-visible: (
-        outline: 2px dashed var(--clr-blue-40),
+        outline: 2px dashed var(--rt-border-focus),
         outline-offset: -2px,
     ),
     action-disabled: (

package/src/lib/ui-kit/checkbox/rtui-checkbox.component.scss

@@ -39,8 +39,8 @@
     }
 
     &__input:disabled + &__box {
-        color: var(--clr-black-40);
-        border-color: var(--clr-black-40);
+        color: var(--rt-text-base-disabled);
+        border-color: var(--rt-border-neutral-strong);
         cursor: default;
     }
 

package/src/lib/ui-kit/dynamic-selectors/components/actions/rtui-dynamic-selector-list-actions.component.scss

@@ -16,7 +16,7 @@ $dynamic-selector-list-actions: (
         size: 1.125rem,
     ),
     item-active: (
-        color: var(--clr-red-100),
+        color: var(--rt-text-accent-danger),
     ),
 );
 

package/src/lib/ui-kit/dynamic-selectors/components/multi-selector-popup/rtui-multi-selector-popup.component.scss

@@ -5,9 +5,9 @@ $multi-selector: (
         width: 20rem,
         height: 30rem,
         padding: 1rem 0 1rem 1rem,
-        box-shadow: 0 0.5rem 1rem 0 var(--clr-black-60),
+        box-shadow: 0 0.5rem 1rem 0 var(--rt-shadow-color),
         border-radius: 0.375rem,
-        background-color: var(--clr-white-100),
+        background-color: var(--rt-bg-base-base),
     ),
     header: (
         padding: 0 1rem 0 0,
@@ -17,25 +17,25 @@ $multi-selector: (
     ),
     header-controls-item-icon: (
         margin-left: 0.5rem,
-        color: var(--clr-black-40),
+        color: var(--rt-text-base-disabled),
     ),
     header-controls-item-info: (
         margin-left: 0.5rem,
         font-size: 0.875rem,
-        color: var(--clr-black-60),
+        color: var(--rt-text-base-secondary),
     ),
     header-controls-item-first: (
         padding: 1rem 0 0 0.5rem,
     ),
     header-controls-item-last: (
         padding: 1rem 0 0 0,
-        border-bottom: solid 1px var(--clr-gray-20),
+        border-bottom: solid 1px var(--rt-border-neutral-divider),
     ),
     item-label-hover: (
-        color: var(--clr-black-60),
+        color: var(--rt-text-base-secondary),
     ),
     options-item-separated: (
-        border-bottom: solid 1px var(--clr-gray-20),
+        border-bottom: solid 1px var(--rt-border-neutral-divider),
     ),
     options-item-title: (
         max-width: 15rem,
@@ -46,11 +46,11 @@ $multi-selector: (
     ),
     placeholder-icon: (
         size: 3rem,
-        color: var(--clr-black-60),
+        color: var(--rt-text-base-secondary),
     ),
     placeholder-title: (
         font-size: 1.5rem,
-        color: var(--clr-black-60),
+        color: var(--rt-text-base-secondary),
     ),
     footer: (
         padding: 1rem 1.5rem 0 0.5rem,
@@ -58,10 +58,10 @@ $multi-selector: (
     ),
     footer-nav-action: (
         font-size: 0.875rem,
-        color: var(--clr-black-60),
+        color: var(--rt-text-base-secondary),
     ),
     footer-nav-action-hover: (
-        color: var(--clr-black-100),
+        color: var(--rt-text-base-strong),
     ),
 );
 

package/src/lib/ui-kit/dynamic-selectors/components/placeholder/rtui-dynamic-selector-placeholder.component.scss

@@ -9,15 +9,15 @@ $dynamic-selector-placeholder: (
     ),
     icon: (
         size: 4rem,
-        color: var(--clr-black-80),
+        color: var(--rt-text-base-soft),
     ),
     icon-warn: (
-        color: var(--clr-orange-70),
+        color: var(--rt-icon-accent-warning),
     ),
     description: (
         font-size: 1rem,
         line-height: 1.25rem,
-        color: var(--clr-black-60),
+        color: var(--rt-text-base-secondary),
     ),
 );
 

package/src/lib/ui-kit/file-uploader/rtui-file-upload.component.scss

@@ -12,7 +12,7 @@ $file-upload: (
         align-items: center,
         gap: 1rem,
         padding: 1rem,
-        border: 2px dashed var(--clr-black-20),
+        border: 2px dashed var(--rt-border-neutral-default),
         border-radius: 1rem,
     ),
     host-dragged: (
@@ -20,11 +20,11 @@ $file-upload: (
     ),
     icon: (
         size: 2rem,
-        color: var(--clr-black-100),
+        color: var(--rt-text-base-strong),
     ),
     title: (
         font-size: 1rem,
-        color: var(--clr-text),
+        color: var(--rt-text-base-primary),
     ),
 );
 

package/src/lib/ui-kit/modal/modal.component.scss

@@ -4,12 +4,12 @@
 $modal: (
     title: (
         font-size: 1.25rem,
-        color: var(--clr-txt),
+        color: var(--rt-text-base-primary),
         font-weight: 400,
     ),
     content: (
         padding: 1rem 1.5rem,
-        color: var(--clr-black-80),
+        color: var(--rt-text-base-soft),
         font-size: 0.8rem,
         text-align: center,
         word-wrap: break-word,
@@ -27,13 +27,13 @@ $modal: (
     ),
     text-highlited: (
         font-weight: 600,
-        color: var(--clr-black-100),
+        color: var(--rt-text-base-strong),
     ),
     text-warn: (
         display: inline,
         font-size: 1rem,
         font-weight: 600,
-        color: var(--clr-red-100),
+        color: var(--rt-text-accent-danger),
     ),
 );
 

package/src/lib/ui-kit/scrollable/scrollable-container.component.scss

@@ -7,22 +7,22 @@ $scrollable: (
         width: 100%,
         display: flex,
         flex-direction: column,
-        background-color: var(--clr-white-100),
+        background-color: var(--rt-bg-base-base),
     ),
     header: (
         padding: 0.5rem 1rem,
-        background-color: var(--clr-white-100),
+        background-color: var(--rt-bg-base-base),
     ),
     content: (
         display: flex,
         flex-direction: column,
         flex-grow: 1,
         padding: 1rem,
-        background-color: var(--clr-white-100),
+        background-color: var(--rt-bg-base-base),
     ),
     footer: (
         padding: 1rem,
-        background-color: var(--clr-white-100),
+        background-color: var(--rt-bg-base-base),
     ),
 );
 

package/src/lib/ui-kit/side-menu/menu/rtui-side-menu.component.scss

@@ -159,7 +159,7 @@ $side-menu: (
         .rtui-sub-side-menu-content {
             width: var(--rt-side-menu-sub-menu-width);
             height: 100%;
-            border-left: 1px solid var(--clr-black-20);
+            border-left: 1px solid var(--rt-border-neutral-default);
             box-shadow:
                 14px 0 28px rgba(0, 0, 0, 0.25),
                 10px 0 10px rgba(0, 0, 0, 0.22);

package/src/lib/ui-kit/side-menu/menu-sub-item/rtui-side-menu-sub-item.component.scss

@@ -53,7 +53,7 @@
                 }
 
                 &:hover {
-                    border-color: var(--clr-black-60);
+                    border-color: var(--rt-border-neutral-emphasis);
                 }
             }
         }

package/src/lib/ui-kit/snack-bar/snack-bar.component.scss

@@ -6,7 +6,7 @@ $snack-bar: (
     ),
     icon: (
         size: 2rem,
-        color: var(--clr-white-100),
+        color: var(--rt-text-base-inverse),
     ),
     message: (
         line-clamp: 5,
@@ -14,14 +14,14 @@ $snack-bar: (
     action: (
         padding: 0.5rem,
         margin: 0 0.25rem,
-        color: var(--clr-blue-80),
-        background-color: var(--clr-blue-100),
+        color: var(--rt-text-accent-info-soft),
+        background-color: var(--rt-bg-accent-info-solid),
     ),
     progress: (
         height: 0.5rem,
     ),
     close-button: (
-        color: var(--clr-white-100),
+        color: var(--rt-text-base-inverse),
     ),
 );
 

package/src/lib/ui-kit/spinner/spinner.component.scss

@@ -30,7 +30,7 @@
 
             mat-spinner {
                 ::ng-deep circle {
-                    stroke: var(--clr-base-accent);
+                    stroke: var(--rt-icon-accent-brand);
                 }
             }
 
@@ -38,7 +38,7 @@
                 width: 3rem;
                 height: 3rem;
 
-                background: var(--clr-white-100);
+                background: var(--rt-bg-base-base);
                 border-radius: 50%;
                 box-shadow:
                     0 1px 3px rgba(0, 0, 0, 0.12),

package/src/lib/ui-kit/table/components/clear-search-button/rtui-clear-button.component.scss

@@ -4,14 +4,14 @@ $clear-button: (
     host: (
         margin: 0 0.5rem 0 0,
         padding: 0.1rem,
-        background-color: var(--clr-black-20),
+        background-color: var(--rt-bg-base-strong),
     ),
     icon: (
         size: 1rem,
-        color: var(--clr-black-60),
+        color: var(--rt-text-base-secondary),
     ),
     icon-hover: (
-        color: var(--clr-black-100),
+        color: var(--rt-text-base-strong),
     ),
 );
 

package/src/lib/ui-kit/table/components/pagination-view/rtui-pagination.component.scss

@@ -5,7 +5,7 @@ $pagination: (
     container: (
         gap: 2rem,
         margin: 0.5rem 0,
-        color: var(--clr-black-60),
+        color: var(--rt-text-base-secondary),
         font-size: 0.875rem,
         font-weight: 400,
         line-height: 1rem,
@@ -21,16 +21,16 @@ $pagination: (
     ),
     paging-item: (
         padding: 0.5rem,
-        border: 1px solid var(--clr-gray-15),
+        border: 1px solid var(--rt-border-neutral-medium),
         border-radius: 0.75rem,
     ),
     paging-item-hover: (
-        color: var(--clr-white-100),
-        background-color: var(--clr-black-60),
+        color: var(--rt-text-static-light),
+        background-color: var(--rt-bg-base-emphasis),
     ),
     paging-item-active: (
-        color: var(--clr-white-100),
-        background-color: var(--clr-black-60),
+        color: var(--rt-text-static-light),
+        background-color: var(--rt-bg-base-emphasis),
     ),
     paging-item-disabled-svg: (
         opacity: 0.3,

package/src/lib/ui-kit/table/components/table-base-cell/table-base-cell.component.scss

@@ -21,7 +21,7 @@ $base-cell: (
         icon-size: 1rem,
     ),
     copy-button-complete: (
-        color: var(--clr-black-100),
+        color: var(--rt-text-base-strong),
     ),
 );
 

package/src/lib/ui-kit/table/components/table-container/table-container.component.scss

@@ -6,13 +6,13 @@ $table-container: (
         margin: 0 0.65rem,
     ),
     selector-label: (
-        color: var(--clr-black-60),
+        color: var(--rt-text-base-secondary),
     ),
     selector-label-hover: (
-        color: var(--clr-black-100),
+        color: var(--rt-text-base-strong),
     ),
     selector-counter: (
-        color: var(--clr-black-60),
+        color: var(--rt-text-base-secondary),
         font-size: 0.875rem,
     ),
     toolbar-mobile: (
@@ -26,7 +26,7 @@ $table-container: (
     ),
     toolbar-actions-divider: (
         height: 2rem,
-        border-left: 1px solid var(--clr-gray-20),
+        border-left: 1px solid var(--rt-border-neutral-divider),
     ),
     toolbar-search: (
         width: 22rem,
@@ -51,16 +51,16 @@ $table-container: (
 
     // initial table container scrollbar styles
     ::-webkit-scrollbar-track:hover {
-        border: 1px solid var(--clr-gray-10);
+        border: 1px solid var(--rt-border-neutral-subtle);
     }
     ::-webkit-scrollbar-thumb {
-        background: var(--clr-gray-20);
+        background: var(--rt-scrollbar-thumb);
         border: 3px solid transparent;
         border-radius: 6px;
         background-clip: content-box;
     }
     ::-webkit-scrollbar-thumb:hover {
-        background: var(--clr-black-40);
+        background: var(--rt-scrollbar-thumb-hover);
         border: 2px solid transparent;
         background-clip: content-box;
     }

package/src/lib/ui-kit/table/components/table-header-cell/table-header-cell.component.scss

@@ -12,10 +12,10 @@ $header-cell: (
     ),
     icon: (
         margin: 0 0 0 1rem,
-        color: var(--clr-black-40),
+        color: var(--rt-text-base-disabled),
     ),
     icon-active: (
-        color: var(--clr-black-100),
+        color: var(--rt-text-base-strong),
     ),
 );
 

package/src/lib/ui-kit/toggle/rtui-toggle.component.scss

@@ -12,31 +12,31 @@ $toggle: (
     ),
     toggle: (
         border-radius: 6.25rem,
-        background-color: var(--clr-gray-5),
+        background-color: var(--rt-bg-base-subtle),
         box-shadow: inset 0 0 0.125rem 0.0625rem rgba(0, 0, 0, 0.05),
     ),
     toggle-check: (
-        box-shadow: inset 0 0 0 1.25rem var(--clr-black-80),
+        box-shadow: inset 0 0 0 1.25rem var(--rt-control-checked),
     ),
     toggle-switch: (
         border-radius: 2.25rem,
-        background-color: var(--clr-white-100),
+        background-color: var(--rt-control-thumb),
         box-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.2),
     ),
     toggle-track: (
-        background-color: var(--clr-gray-10),
+        background-color: var(--rt-control-track),
         border-radius: 2.5rem,
-        border: 0.0625rem solid var(--clr-gray-15),
+        border: 0.0625rem solid var(--rt-border-neutral-medium),
     ),
     label: (
-        color: var(--clr-black-60),
+        color: var(--rt-text-base-secondary),
         font-size: 0.875rem,
     ),
     label-active: (
-        color: var(--clr-black-100),
+        color: var(--rt-text-base-strong),
     ),
     label-hover: (
-        color: var(--clr-black-100),
+        color: var(--rt-text-base-strong),
         cursor: pointer,
     ),
 );

package/src/lib/ui-kit/toolbar/toolbar.component.scss

@@ -13,7 +13,7 @@ $toolbar: (
     bars: (
         border-bottom-style: solid,
         border-bottom-width: 1px,
-        border-bottom-color: var(--clr-black-20),
+        border-bottom-color: var(--rt-border-neutral-default),
     ),
     bars-left: (
         width: fit-content,

package/src/styles/TOKENS.md

@@ -0,0 +1,28 @@
+# rt-tools CSS Design Tokens (v2)
+
+GMT-style three-tier CSS custom property system. **Full documentation lives in
+Storybook**: Foundation/Design Tokens/{Overview, Colors, Semantic, Spacing},
+Foundation/Theming, How to use tokens (`projects/ui-kit/docs/*.mdx`).
+
+```
+Tier 1  primitives   --rt-color-*                      base/_tokens.scss
+Tier 2  semantic     --rt-{bg,text,icon,border}-*      base/_tokens.scss (light-dark())
+Tier 3  component    --rt-<component>-<el>-<token>     per-component SCSS maps
+```
+
+Quick facts:
+
+- Light default; `.rt-dark` global switch; `data-rt-theme` nested local contexts;
+  `.rt-theme-auto` follows the OS. Runtime: `RtThemeService` / `RtThemeDirective`.
+- Angular Material hybrid: semantic tokens are `var(--mat-sys-*, light-dark(…))`
+  fallback chains. Opt out: `@use '...main' with ($tokens-use-material: false)`.
+- Accent roles `{primary,success,warning,danger,info,neutral}`,
+  steps `{subtle,solid,hover,disabled}` (simplified vs GMT).
+- Foundations: `--rt-spacing-{0..64}` (px-named, rem values), `--rt-radius-*`,
+  `--rt-font-*`, `--rt-shadow-*`, `--rt-transition-*`, `--rt-z-index-*`.
+- Legacy `--clr-*` variables are emitted as **deprecated aliases**.
+- Prebuilt CSS for non-sass consumers: `dist/ui-kit/styles/tokens.css`
+  (`pnpm run build:tokens`).
+- Figma parity: collections `core` (`rt/color/*`) and `theme` (`rt/{bg,text,icon,border}/*`,
+  Light/Dark modes) in the “RT-Tools UI Kit” file mirror these names 1:1.
+- App-defined (never set by the kit): `--clr-avalon`, `--font-default`, mat theme colors.

package/src/styles/base/_base.scss

@@ -1,5 +1,3 @@
-@use './mixin' as mixins;
-
 $palette: (
     white: (
         100: #ffffff,
@@ -55,17 +53,12 @@ $palette: (
     ),
 );
 
-:root {
-    @each $family, $set in $palette {
-        @each $saturate, $clr in $set {
-            #{mixins.generateCssClrVar($family, $saturate)}: #{$clr};
-        }
-    }
-
-    --clr-base-accent: #0d1c2b;
-    --clr-txt: rgba(0, 0, 0, 0.87);
-    --clr-white-rgb: 255, 255, 255;
+// NOTE: the $palette map above is kept for backwards compatibility (consumers may @use it).
+// All CSS custom property emission lives in base/_tokens.scss:
+//   --rt-color-* primitives, --rt-{bg,text,icon,border}-* semantic, foundations,
+//   and deprecated --clr-* aliases.
 
+:root {
     // Buttons
     --rt-button-box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.12), 0 1px 18px 0 rgba(0, 0, 0, 0.14);
 }