@rt-tools/ui-kit 0.3.1 → 0.5.0

package/src/styles/components/button/_map.scss

@@ -0,0 +1,184 @@
+// Виды кнопки таблицей: пятнадцать палитр по три оформления — сплошное, обводка и светлое —
+// плюс основа и текстовые виды. Каждое правило берёт значения отсюда, а не пишет их у себя.
+// Часть стилей кнопки — входом остаётся `_rtui_button.scss`, он же подключает части по порядку.
+
+$rtui-button: (
+    base: (
+        width: auto,
+        bg: transparent,
+        border: 0,
+        color: var(--rt-text-base-soft),
+        display: inline-flex,
+        font-size: 0,
+        gap: 0,
+        padding: 0,
+        shadow: 0,
+        shadow-blur: 8px,
+    ),
+    accent: (
+        border: 1px solid var(--rt-color-blue-100),
+        color: var(--rt-text-static-light),
+        bg: var(--rt-color-blue-60),
+        hover-bg: var(--rt-color-blue-40),
+        active-shadow: var(--rt-color-blue-40),
+    ),
+    accent-outline: (
+        border: 1px solid var(--rt-color-blue-100),
+        bg: var(--rt-color-blue-20),
+        color: var(--rt-text-accent-info),
+        hover-border: 1px solid var(--rt-color-blue-80),
+        hover-bg: var(--rt-bg-base-base),
+        active-shadow: var(--rt-color-blue-40),
+    ),
+    accent-light: (
+        color: var(--rt-text-accent-info),
+        bg: var(--rt-color-blue-40),
+        hover-color: var(--rt-text-accent-info-soft),
+        hover-bg: var(--rt-color-blue-20),
+        active-shadow: var(--rt-color-blue-40),
+    ),
+    success: (
+        border: 1px solid var(--rt-color-green-100),
+        color: var(--rt-text-static-light),
+        bg: var(--rt-bg-accent-success-solid),
+        hover-bg: var(--rt-color-green-60),
+        active-shadow: var(--rt-color-green-40),
+    ),
+    success-outline: (
+        border: 1px solid var(--rt-color-green-100),
+        bg: var(--rt-color-green-20),
+        color: var(--rt-text-accent-success),
+        hover-border: 1px solid var(--rt-color-green-80),
+        hover-bg: var(--rt-bg-base-base),
+        active-shadow: var(--rt-color-green-40),
+    ),
+    success-light: (
+        color: var(--rt-text-accent-success),
+        bg: var(--rt-color-green-20),
+        hover-color: var(--rt-text-accent-success-soft),
+        hover-bg: var(--rt-bg-accent-success-subtle),
+        active-shadow: var(--rt-color-green-40),
+    ),
+    secondary: (
+        border: 1px solid var(--rt-border-neutral-emphasis),
+        color: var(--rt-text-static-light),
+        bg: var(--rt-bg-base-emphasis),
+        hover-bg: var(--rt-bg-base-emphasis-soft),
+        active-shadow: var(--rt-bg-base-emphasis-soft),
+    ),
+    secondary-outline: (
+        border: 1px solid var(--rt-border-neutral-emphasis),
+        bg: var(--rt-bg-base-strong),
+        color: var(--rt-text-base-secondary),
+        hover-bg: var(--rt-bg-base-base),
+        active-shadow: var(--rt-bg-base-emphasis-soft),
+    ),
+    secondary-light: (
+        color: var(--rt-text-base-soft),
+        bg: var(--rt-bg-base-emphasis-soft),
+        hover-color: var(--rt-text-base-secondary),
+        hover-bg: var(--rt-bg-base-strong),
+        active-shadow: var(--rt-bg-base-emphasis-soft),
+    ),
+    error: (
+        border: 1px solid var(--rt-border-accent-danger),
+        color: var(--rt-text-static-light),
+        bg: var(--rt-color-red-80),
+        hover-bg: var(--rt-color-red-60),
+        active-shadow: var(--rt-color-red-40),
+    ),
+    error-outline: (
+        border: 1px solid var(--rt-border-accent-danger),
+        bg: var(--rt-bg-accent-danger-subtle),
+        color: var(--rt-text-accent-danger),
+        hover-bg: var(--rt-bg-base-base),
+        active-shadow: var(--rt-color-red-40),
+    ),
+    error-light: (
+        color: var(--rt-text-accent-danger),
+        bg: var(--rt-color-red-40),
+        hover-bg: var(--rt-bg-accent-danger-subtle),
+        active-shadow: var(--rt-color-red-40),
+    ),
+    warning: (
+        border: 1px solid var(--rt-color-orange-100),
+        color: var(--rt-text-static-light),
+        bg: var(--rt-bg-accent-warning-solid),
+        hover-bg: var(--rt-color-orange-60),
+        active-shadow: var(--rt-color-orange-40),
+    ),
+    warning-outline: (
+        border: 1px solid var(--rt-color-orange-100),
+        bg: var(--rt-color-orange-10),
+        color: var(--rt-text-accent-warning),
+        hover-bg: var(--rt-bg-base-base),
+        active-shadow: var(--rt-color-orange-40),
+    ),
+    warning-light: (
+        color: var(--rt-text-accent-warning),
+        bg: var(--rt-color-orange-10),
+        hover-bg: var(--rt-color-orange-5),
+        active-shadow: var(--rt-color-orange-40),
+    ),
+    accent-text: (
+        border: 0,
+        bg: transparent,
+        color: var(--rt-text-accent-info),
+        hover-bg: var(--rt-bg-base-hover),
+    ),
+    success-text: (
+        border: 0,
+        bg: transparent,
+        color: var(--rt-text-accent-success),
+        hover-bg: var(--rt-bg-base-hover),
+    ),
+    secondary-text: (
+        border: 0,
+        bg: transparent,
+        color: var(--rt-text-base-secondary),
+        hover-bg: var(--rt-bg-base-hover),
+    ),
+    error-text: (
+        border: 0,
+        bg: transparent,
+        color: var(--rt-text-accent-danger),
+        hover-bg: var(--rt-bg-base-hover),
+    ),
+    warning-text: (
+        border: 0,
+        bg: transparent,
+        color: var(--rt-text-accent-warning),
+        hover-bg: var(--rt-bg-base-hover),
+    ),
+    size-sm: (
+        gap: 4px,
+        padding: 4px 8px,
+        font-size: 12px,
+        width: auto,
+        display: inline-flex,
+    ),
+
+    size-md: (
+        gap: 8px,
+        padding: 8px 16px,
+        font-size: 14px,
+        width: auto,
+        display: inline-flex,
+    ),
+
+    size-lg: (
+        gap: 12px,
+        padding: 12px 24px,
+        font-size: 18px,
+        width: auto,
+        display: inline-flex,
+    ),
+
+    size-full: (
+        width: 100%,
+        display: flex,
+        gap: 8px,
+        padding: 8px 16px,
+        font-size: 14px,
+    ),
+);

package/src/styles/components/button/_palettes.scss

@@ -0,0 +1,218 @@
+// Палитры кнопки: пятнадцать классов вида — сплошное оформление, обводка и светлое у каждой из
+// пяти ролей. Каждый класс только переназначает свойства основы.
+// Часть стилей кнопки — входом остаётся `_rtui_button.scss`.
+
+/* accent */
+.rtui-btn-accent {
+    --border: var(--rt-rtui-btn-accent-border);
+    --color: var(--rt-rtui-btn-accent-color);
+    --bg: var(--rt-rtui-btn-accent-bg);
+
+    &:hover {
+        --bg: var(--rt-rtui-btn-accent-hover-bg);
+    }
+
+    &:active {
+        --shadow: var(--rt-rtui-btn-accent-active-shadow);
+    }
+}
+
+.rtui-btn-accent-outline {
+    --border: var(--rt-rtui-btn-accent-outline-border);
+    --bg: var(--rt-rtui-btn-accent-outline-bg);
+    --color: var(--rt-rtui-btn-accent-outline-color);
+
+    &:hover {
+        --border: var(--rt-rtui-btn-accent-outline-hover-border);
+        --bg: var(--rt-rtui-btn-accent-outline-hover-bg);
+    }
+
+    &:active {
+        --shadow: var(--rt-rtui-btn-accent-outline-active-shadow);
+    }
+}
+
+.rtui-btn-accent-light {
+    --color: var(--rt-rtui-btn-accent-light-color);
+    --bg: var(--rt-rtui-btn-accent-light-bg);
+
+    &:hover {
+        --color: var(--rt-rtui-btn-accent-light-hover-color);
+        --bg: var(--rt-rtui-btn-accent-light-hover-bg);
+    }
+
+    &:active {
+        --shadow: var(--rt-rtui-btn-accent-light-active-shadow);
+    }
+}
+
+/* success */
+.rtui-btn-success {
+    --border: var(--rt-rtui-btn-success-border);
+    --color: var(--rt-rtui-btn-success-color);
+    --bg: var(--rt-rtui-btn-success-bg);
+
+    &:hover {
+        --bg: var(--rt-rtui-btn-success-hover-bg);
+    }
+
+    &:active {
+        --shadow: var(--rt-rtui-btn-success-active-shadow);
+    }
+}
+
+.rtui-btn-success-outline {
+    --border: var(--rt-rtui-btn-success-outline-border);
+    --bg: var(--rt-rtui-btn-success-outline-bg);
+    --color: var(--rt-rtui-btn-success-outline-color);
+
+    &:hover {
+        --border: var(--rt-rtui-btn-success-outline-hover-border);
+        --bg: var(--rt-rtui-btn-success-outline-hover-bg);
+    }
+
+    &:active {
+        --shadow: var(--rt-rtui-btn-success-outline-active-shadow);
+    }
+}
+
+.rtui-btn-success-light {
+    --color: var(--rt-rtui-btn-success-light-color);
+    --bg: var(--rt-rtui-btn-success-light-bg);
+
+    &:hover {
+        --color: var(--rt-rtui-btn-success-light-hover-color);
+        --bg: var(--rt-rtui-btn-success-light-hover-bg);
+    }
+
+    &:active {
+        --shadow: var(--rt-rtui-btn-success-light-active-shadow);
+    }
+}
+
+/* secondary */
+.rtui-btn-secondary {
+    --border: var(--rt-rtui-btn-secondary-border);
+    --color: var(--rt-rtui-btn-secondary-color);
+    --bg: var(--rt-rtui-btn-secondary-bg);
+
+    &:hover {
+        --bg: var(--rt-rtui-btn-secondary-hover-bg);
+    }
+
+    &:active {
+        --shadow: var(--rt-rtui-btn-secondary-active-shadow);
+    }
+}
+
+.rtui-btn-secondary-outline {
+    --border: var(--rt-rtui-btn-secondary-outline-border);
+    --bg: var(--rt-rtui-btn-secondary-outline-bg);
+    --color: var(--rt-rtui-btn-secondary-outline-color);
+
+    &:hover {
+        --bg: var(--rt-rtui-btn-secondary-outline-hover-bg);
+    }
+
+    &:active {
+        --shadow: var(--rt-rtui-btn-secondary-outline-active-shadow);
+    }
+}
+
+.rtui-btn-secondary-light {
+    --color: var(--rt-rtui-btn-secondary-light-color);
+    --bg: var(--rt-rtui-btn-secondary-light-bg);
+
+    &:hover {
+        --color: var(--rt-rtui-btn-secondary-light-hover-color);
+        --bg: var(--rt-rtui-btn-secondary-light-hover-bg);
+    }
+
+    &:active {
+        --shadow: var(--rt-rtui-btn-secondary-light-active-shadow);
+    }
+}
+
+/* error */
+.rtui-btn-error {
+    --border: var(--rt-rtui-btn-error-border);
+    --color: var(--rt-rtui-btn-error-color);
+    --bg: var(--rt-rtui-btn-error-bg);
+
+    &:hover {
+        --bg: var(--rt-rtui-btn-error-hover-bg);
+    }
+
+    &:active {
+        --shadow: var(--rt-rtui-btn-error-active-shadow);
+    }
+}
+
+.rtui-btn-error-outline {
+    --border: var(--rt-rtui-btn-error-outline-border);
+    --bg: var(--rt-rtui-btn-error-outline-bg);
+    --color: var(--rt-rtui-btn-error-outline-color);
+
+    &:hover {
+        --bg: var(--rt-rtui-btn-error-outline-hover-bg);
+    }
+
+    &:active {
+        --shadow: var(--rt-rtui-btn-error-outline-active-shadow);
+    }
+}
+
+.rtui-btn-error-light {
+    --color: var(--rt-rtui-btn-error-light-color);
+    --bg: var(--rt-rtui-btn-error-light-bg);
+
+    &:hover {
+        --bg: var(--rt-rtui-btn-error-light-hover-bg);
+    }
+
+    &:active {
+        --shadow: var(--rt-rtui-btn-error-light-active-shadow);
+    }
+}
+
+/* warning */
+.rtui-btn-warning {
+    --border: var(--rt-rtui-btn-warning-border);
+    --color: var(--rt-rtui-btn-warning-color);
+    --bg: var(--rt-rtui-btn-warning-bg);
+
+    &:hover {
+        --bg: var(--rt-rtui-btn-warning-hover-bg);
+    }
+
+    &:active {
+        --shadow: var(--rt-rtui-btn-warning-active-shadow);
+    }
+}
+
+.rtui-btn-warning-outline {
+    --border: var(--rt-rtui-btn-warning-outline-border);
+    --bg: var(--rt-rtui-btn-warning-outline-bg);
+    --color: var(--rt-rtui-btn-warning-outline-color);
+
+    &:hover {
+        --bg: var(--rt-rtui-btn-warning-outline-hover-bg);
+    }
+
+    &:active {
+        --shadow: var(--rt-rtui-btn-warning-outline-active-shadow);
+    }
+}
+
+.rtui-btn-warning-light {
+    --color: var(--rt-rtui-btn-warning-light-color);
+    --bg: var(--rt-rtui-btn-warning-light-bg);
+
+    &:hover {
+        --bg: var(--rt-rtui-btn-warning-light-hover-bg);
+    }
+
+    &:active {
+        --shadow: var(--rt-rtui-btn-warning-light-active-shadow);
+    }
+}

package/src/styles/components/button/_sizes.scss

@@ -0,0 +1,29 @@
+// Размеры кнопки и её растяжение по ширине родителя.
+// Часть стилей кнопки — входом остаётся `_rtui_button.scss`.
+
+/* size */
+.rtui-btn-sm {
+    --gap: var(--rt-rtui-btn-size-sm-gap);
+    --padding: var(--rt-rtui-btn-size-sm-padding);
+    --font-size: var(--rt-rtui-btn-size-sm-font-size);
+}
+
+.rtui-btn-md {
+    --gap: var(--rt-rtui-btn-size-md-gap);
+    --padding: var(--rt-rtui-btn-size-md-padding);
+    --font-size: var(--rt-rtui-btn-size-md-font-size);
+}
+
+.rtui-btn-lg {
+    --gap: var(--rt-rtui-btn-size-lg-gap);
+    --padding: var(--rt-rtui-btn-size-lg-padding);
+    --font-size: var(--rt-rtui-btn-size-lg-font-size);
+}
+
+.rtui-btn-full {
+    --width: var(--rt-rtui-btn-size-full-width);
+    --display: var(--rt-rtui-btn-size-full-display);
+    --gap: var(--rt-rtui-btn-size-full-gap);
+    --padding: var(--rt-rtui-btn-size-full-padding);
+    --font-size: var(--rt-rtui-btn-size-full-font-size);
+}

package/src/styles/components/button/_text.scss

@@ -0,0 +1,68 @@
+// Текстовые виды кнопки: оформление без фона и рамки. Стоят после палитр намеренно — правила
+// равной силы разбираются порядком, и вид без фона обязан перебивать сплошной.
+// Часть стилей кнопки — входом остаётся `_rtui_button.scss`.
+
+/* text — transparent, borderless label with a subtle hover wash.
+   Shared box matches the legacy text-button (inline-text look). Compound
+   `.rtui-btn[...-text]` (0,2,0) outranks the size tokens (0,1,0) regardless of order. */
+.rtui-btn[class*='-text'] {
+    --font-size: 16px;
+    --gap: 8px;
+    --padding: 0 10px;
+
+    min-height: 30px;
+    border-radius: 5px;
+    font-weight: 400;
+}
+
+.rtui-btn-accent-text {
+    --border: var(--rt-rtui-btn-accent-text-border);
+    --bg: var(--rt-rtui-btn-accent-text-bg);
+    --color: var(--rt-rtui-btn-accent-text-color);
+
+    &:hover {
+        --bg: var(--rt-rtui-btn-accent-text-hover-bg);
+    }
+}
+
+.rtui-btn-success-text {
+    --border: var(--rt-rtui-btn-success-text-border);
+    --bg: var(--rt-rtui-btn-success-text-bg);
+    --color: var(--rt-rtui-btn-success-text-color);
+
+    &:hover {
+        --bg: var(--rt-rtui-btn-success-text-hover-bg);
+    }
+}
+
+/* secondary-text resolves its colour ON the element so the `--rt-text-base-secondary`
+   semantic (`--mat-sys-on-surface-variant` hybrid) lands where Material is in scope. */
+.rtui-btn-secondary-text {
+    --border: var(--rt-rtui-btn-secondary-text-border);
+    --bg: var(--rt-rtui-btn-secondary-text-bg);
+    --color: var(--mat-sys-on-surface-variant, var(--rt-rtui-btn-secondary-text-color));
+
+    &:hover {
+        --bg: var(--rt-rtui-btn-secondary-text-hover-bg);
+    }
+}
+
+.rtui-btn-error-text {
+    --border: var(--rt-rtui-btn-error-text-border);
+    --bg: var(--rt-rtui-btn-error-text-bg);
+    --color: var(--rt-rtui-btn-error-text-color);
+
+    &:hover {
+        --bg: var(--rt-rtui-btn-error-text-hover-bg);
+    }
+}
+
+.rtui-btn-warning-text {
+    --border: var(--rt-rtui-btn-warning-text-border);
+    --bg: var(--rt-rtui-btn-warning-text-bg);
+    --color: var(--rt-rtui-btn-warning-text-color);
+
+    &:hover {
+        --bg: var(--rt-rtui-btn-warning-text-hover-bg);
+    }
+}

package/src/styles/main.scss

@@ -10,7 +10,6 @@
 
 // Components
 @forward 'components/form';
-@forward 'components/button';
 @forward 'components/rtui_button';
 @forward 'components/table';
 @forward 'components/snackbar';

package/styles/tokens.css

@@ -174,6 +174,8 @@
   --rt-bg-accent-warning-solid: var(--rt-color-warning-80);
   --rt-bg-accent-warning-hover: light-dark(color-mix(in srgb, var(--rt-color-warning-80) 90%, #000), color-mix(in srgb, var(--rt-color-warning-80) 90%, #fff));
   --rt-bg-accent-warning-disabled: color-mix(in srgb, var(--rt-color-warning-80) 38%, transparent);
+  --rt-bg-accent-highlight: light-dark(#ffeb3b, #ffd54f);
+  --rt-text-accent-highlight: #181818;
   --rt-bg-accent-danger-subtle: light-dark(var(--rt-color-danger-10), color-mix(in srgb, var(--rt-color-danger-100) 18%, #1c1b1e));
   --rt-bg-accent-danger-solid: var(--rt-color-danger-100);
   --rt-bg-accent-danger-hover: light-dark(color-mix(in srgb, var(--rt-color-danger-100) 90%, #000), color-mix(in srgb, var(--rt-color-danger-100) 90%, #fff));
@@ -241,7 +243,9 @@
   --rt-spacing-4: 0.25rem;
   --rt-spacing-6: 0.375rem;
   --rt-spacing-8: 0.5rem;
+  --rt-spacing-10: 0.625rem;
   --rt-spacing-12: 0.75rem;
+  --rt-spacing-14: 0.875rem;
   --rt-spacing-16: 1rem;
   --rt-spacing-20: 1.25rem;
   --rt-spacing-24: 1.5rem;
@@ -266,6 +270,13 @@
   --rt-font-weight-medium: 500;
   --rt-font-weight-semibold: 600;
   --rt-font-weight-bold: 700;
+  --rt-icon-size-xs: 0.875rem;
+  --rt-icon-size-sm: 1rem;
+  --rt-icon-size-md: 1.5rem;
+  --rt-icon-size-lg: 2rem;
+  --rt-icon-size-xl: 2.5rem;
+  --rt-icon-size-xxl: 3rem;
+  --rt-icon-size-3xl: 3.5rem;
   --rt-shadow-sm: 0 0.0625rem 0.25rem 0 rgba(0, 0, 0, 0.12);
   --rt-shadow-md: 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.14);
   --rt-shadow-lg: 0 0.5rem 1rem 0 var(--rt-shadow-color);