@rt-tools/ui-kit 0.3.1 → 0.5.0

package/src/styles/components/_rtui_button.scss

@@ -1,547 +1,13 @@
-@use '../base/mixin' as mixins;
-
-$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,
-    ),
-);
-
-:root {
-    @each $element, $elements in $rtui-button {
-        @each $style-token, $value in $elements {
-            #{mixins.generateCssVar('rtui-btn', #{$element}, #{$style-token})}: #{$value};
-        }
-    }
-}
-
-.rtui-btn {
-    --width: var(--rt-rtui-btn-base-width);
-    --bg: var(--rt-rtui-btn-base-bg);
-    --border: var(--rt-rtui-btn-base-border);
-    --color: var(--rt-rtui-btn-base-color);
-    --display: var(--rt-rtui-btn-base-display);
-    --font-size: var(--rt-rtui-btn-base-font-size);
-    --gap: var(--rt-rtui-btn-base-gap);
-    --padding: var(--rt-rtui-btn-base-padding);
-    --shadow: var(--rt-rtui-btn-base-shadow);
-    --shadow-blur: var(--rt-rtui-btn-base-shadow-blur);
-
-    display: var(--display);
-    width: var(--width);
-    align-items: center;
-    justify-content: center;
-    padding: var(--padding);
-    border: var(--border);
-    border-radius: 6px;
-    background-color: var(--bg);
-    box-shadow: var(--shadow);
-    color: var(--color);
-    cursor: pointer;
-    font-size: var(--font-size);
-    font-weight: 600;
-    gap: var(--gap);
-    line-height: 1;
-    text-decoration: none;
-    transition:
-        background-color 0.15s linear,
-        color 0.15s linear,
-        box-shadow 0.15s linear,
-        border-color 0.15s linear;
-
-    &:focus {
-        outline: none;
-    }
-
-    &:focus-visible {
-        outline: 2px dashed var(--rt-border-focus);
-        outline-offset: 2px;
-    }
-
-    &:disabled {
-        cursor: default;
-        opacity: 0.75;
-        pointer-events: none;
-    }
-}
-
-/* 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);
-    }
-}
-
-/* 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);
-    }
-}
-
-/* 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);
-}
+// Кнопка кита: вид, размер и состояние. Файл остался входом, а сами правила лежат частями
+// рядом, по предмету: таблица видов — `button/_map.scss`, основа блока — `button/_base.scss`,
+// пятнадцать палитр — `button/_palettes.scss`, виды без фона — `button/_text.scss`, размеры —
+// `button/_sizes.scss`.
+// Порядок подключения — это порядок каскада: правила одного блока равны по силе, и текстовые
+// виды перебивают палитры только потому, что стоят после них.
+
+@forward 'button/map';
+
+@use 'button/base';
+@use 'button/palettes';
+@use 'button/text';
+@use 'button/sizes';

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

@@ -0,0 +1,64 @@
+// Основа кнопки: объявление свойств вида на корне страницы и сам блок `.rtui-btn` — раскладка,
+// рамка, тень, состояния наведения, фокуса и отключённости.
+// Часть стилей кнопки — входом остаётся `_rtui_button.scss`.
+
+@use '../../base/mixin' as mixins;
+@use 'map' as button;
+
+:root {
+    @each $element, $elements in button.$rtui-button {
+        @each $style-token, $value in $elements {
+            #{mixins.generateCssVar('rtui-btn', #{$element}, #{$style-token})}: #{$value};
+        }
+    }
+}
+
+.rtui-btn {
+    --width: var(--rt-rtui-btn-base-width);
+    --bg: var(--rt-rtui-btn-base-bg);
+    --border: var(--rt-rtui-btn-base-border);
+    --color: var(--rt-rtui-btn-base-color);
+    --display: var(--rt-rtui-btn-base-display);
+    --font-size: var(--rt-rtui-btn-base-font-size);
+    --gap: var(--rt-rtui-btn-base-gap);
+    --padding: var(--rt-rtui-btn-base-padding);
+    --shadow: var(--rt-rtui-btn-base-shadow);
+    --shadow-blur: var(--rt-rtui-btn-base-shadow-blur);
+
+    display: var(--display);
+    width: var(--width);
+    align-items: center;
+    justify-content: center;
+    padding: var(--padding);
+    border: var(--border);
+    border-radius: 6px;
+    background-color: var(--bg);
+    box-shadow: var(--shadow);
+    color: var(--color);
+    cursor: pointer;
+    font-size: var(--font-size);
+    font-weight: 600;
+    gap: var(--gap);
+    line-height: 1;
+    text-decoration: none;
+    transition:
+        background-color 0.15s linear,
+        color 0.15s linear,
+        box-shadow 0.15s linear,
+        border-color 0.15s linear;
+
+    &:focus {
+        outline: none;
+    }
+
+    &:focus-visible {
+        outline: 2px dashed var(--rt-border-focus);
+        outline-offset: 2px;
+    }
+
+    &:disabled {
+        cursor: default;
+        opacity: 0.75;
+        pointer-events: none;
+    }
+}