@rt-tools/ui-kit 0.3.1 → 0.5.0

package/src/styles/components/_button.scss

@@ -1,372 +0,0 @@
-/// @deprecated — legacy `.c-button` system. New code uses `.rtui-btn` (_rtui_button.scss);
-/// ~60% of this module duplicates it. Kept because consumers still apply `.c-button`
-/// classes AND override `--rt-button-*` vars directly (incl. dark mode) — rerouting these rules
-/// onto `--rt-rtui-btn-*` would silently kill those overrides. Removal plan (next major):
-/// map classes `--fill-green→success`, `--fill-red→error`, `--fill-blue→accent-light`,
-/// `--outline-*→*-outline`; `--txt-*`/`--fab` first need a text/icon appearance in .rtui-btn.
-/// See TOKENS.md "Buttons: legacy vs rtui".
-@use '../base/mixin' as mixins;
-@use '../base/variables' as vars;
-@use 'sass:color' as color;
-
-$button: (
-    base: (
-        color: var(--rt-color-neutral-100),
-        font-family: var(--font-default),
-    ),
-    fab: (
-        color: var(--rt-color-neutral-60),
-    ),
-    fab-hover: (
-        color: var(--rt-color-neutral-100),
-    ),
-    text-hover: (
-        background: var(--rt-color-neutral-15),
-    ),
-    text-focus: (
-        background: var(--rt-color-neutral-25),
-    ),
-    text-active: (
-        background: #b2cbca,
-        // palette outlier, no neutral-scale equivalent
-    ),
-    text-base: (
-        color: var(--rt-color-neutral-60),
-    ),
-    text-base-hover: (
-        color: var(--rt-color-neutral-100),
-    ),
-    text-gray: (
-        color: var(--rt-color-neutral-60),
-    ),
-    text-gray-hover: (
-        color: var(--rt-color-blue-60),
-    ),
-    text-blue: (
-        color: var(--rt-color-blue-100),
-    ),
-    text-blue-hover: (
-        color: var(--rt-color-neutral-100),
-    ),
-    fill-base: (
-        background-color: var(--rt-color-neutral-100),
-        color: var(--rt-color-neutral-0),
-    ),
-    fill-blue: (
-        background-color: var(--rt-color-blue-20),
-        color: var(--rt-color-blue-100),
-    ),
-    fill-gray: (
-        background-color: var(--rt-color-neutral-5),
-        color: var(--rt-color-neutral-40),
-    ),
-    fill-black: (
-        background-color: var(--rt-color-neutral-100),
-        color: var(--rt-color-neutral-0),
-    ),
-    fill-green: (
-        border: 1px solid color.scale(vars.$btn-success, $lightness: -10%),
-        color: var(--rt-color-neutral-0),
-        background-color: var(--rt-color-green-80),
-    ),
-    fill-green-hover: (
-        background-color: color.scale(vars.$btn-success, $lightness: -10%),
-    ),
-    fill-green-light: (
-        border-color: color.scale(vars.$btn-success-soft, $lightness: -10%),
-        color: var(--rt-color-green-100),
-        background-color: var(--rt-color-green-10),
-    ),
-    fill-green-light-hover: (
-        background-color: color.scale(vars.$btn-success-soft, $lightness: -10%),
-    ),
-    fill-red: (
-        border: 1px solid color.scale(vars.$btn-danger, $lightness: -10%),
-        color: var(--rt-color-neutral-0),
-        background-color: vars.$btn-danger,
-    ),
-    fill-red-hover: (
-        background-color: color.scale(vars.$btn-danger, $lightness: -10%),
-    ),
-    fill-red-light: (
-        border-color: color.scale(vars.$btn-danger-soft, $lightness: -10%),
-        color: var(--rt-color-red-100),
-        background-color: var(--rt-color-red-10),
-    ),
-    fill-red-light-hover: (
-        background-color: color.scale(vars.$btn-danger-soft, $lightness: -10%),
-    ),
-    outline: (
-        border: 1px solid var(--rt-color-blue-40),
-    ),
-    outline-blue: (
-        color: var(--rt-color-blue-100),
-    ),
-    outline-base: (
-        color: var(--rt-color-neutral-100),
-    ),
-    disabled: (
-        background-color: var(--rt-color-neutral-5),
-        color: var(--rt-color-neutral-40),
-    ),
-);
-
-:root {
-    @each $element, $elements in $button {
-        @each $style-token, $value in $elements {
-            #{mixins.generateCssVar('button', #{$element}, #{$style-token})}: #{$value};
-        }
-    }
-}
-
-button {
-    cursor: pointer;
-    line-height: 1;
-}
-
-.c-button {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--rt-button-base-color);
-    font-family: var(--rt-button-base-font-family);
-    font-size: 1rem;
-    line-height: 1;
-    transition: all 0.15s linear;
-
-    // FAB
-    &[class*='--fab'] {
-        border: 0;
-        background-color: transparent;
-        color: var(--rt-button-fab-color);
-
-        &:hover {
-            color: var(--rt-button-fab-hover-color);
-
-            svg {
-                g {
-                    fill: var(--rt-button-fab-hover-color);
-                }
-            }
-        }
-    }
-
-    // --fab {color}
-
-    // TEXT
-    &[class*='--txt-'] {
-        border: 0;
-        border-radius: 5px;
-        background-color: transparent;
-
-        &:hover {
-            background: var(--rt-button-text-hover-background);
-        }
-
-        &:focus {
-            background: var(--rt-button-text-focus-background);
-        }
-
-        &:active {
-            background: var(--rt-button-text-active-background);
-        }
-
-        &[class*='base'] {
-            color: var(--rt-button-text-base-color);
-
-            &:hover {
-                color: var(--rt-button-text-base-hover-color);
-
-                svg {
-                    g {
-                        fill: var(--rt-button-text-base-hover-color);
-                    }
-                }
-            }
-        }
-
-        &[class*='gray'] {
-            color: var(--rt-button-text-gray-color);
-
-            &:hover {
-                color: var(--rt-button-text-gray-hover-color);
-
-                svg {
-                    g {
-                        fill: var(--rt-button-text-gray-hover-color);
-                    }
-                }
-            }
-        }
-
-        &[class*='blue'] {
-            color: var(--rt-button-text-blue-color);
-
-            .c-circle {
-                border-color: var(--rt-button-text-blue-color);
-            }
-
-            &:hover {
-                color: var(--rt-button-text-blue-hover-color);
-
-                .c-circle {
-                    border-color: var(--rt-button-text-blue-hover-color);
-                }
-            }
-        }
-    }
-
-    // --txt-{color}
-
-    // COLOR
-    &[class*='--fill-'] {
-        border: 0;
-        border-radius: mixins.rem(6);
-
-        &[class*='base'] {
-            background-color: var(--rt-button-fill-base-background-color);
-            color: var(--rt-button-fill-base-color);
-        }
-
-        &[class*='blue'] {
-            background-color: var(--rt-button-fill-blue-background-color);
-            color: var(--rt-button-fill-blue-color);
-        }
-
-        &[class*='gray'] {
-            background-color: var(--rt-button-fill-gray-background-color);
-            color: var(--rt-button-fill-gray-color);
-        }
-
-        &[class*='black'] {
-            background-color: var(--rt-button-fill-black-background-color);
-            color: var(--rt-button-fill-black-color);
-        }
-
-        &[class*='green'] {
-            border: var(--rt-button-fill-green-border);
-            border-radius: 2px;
-            background-color: var(--rt-button-fill-green-background-color);
-            box-shadow: 0 2px 4px rgb(24 24 24 / 10%);
-            color: var(--rt-button-fill-green-color);
-
-            &:hover {
-                background-color: var(--rt-button-fill-green-hover-background-color);
-            }
-
-            &[class*='-light'] {
-                border-color: var(--rt-button-fill-green-light-border-color);
-                background-color: var(--rt-button-fill-green-light-background-color);
-                color: var(--rt-button-fill-green-light-color);
-
-                &:hover {
-                    background-color: var(--rt-button-fill-green-light-hover-background-color);
-                }
-            }
-        }
-
-        &[class*='red'] {
-            border: var(--rt-button-fill-red-border);
-            border-radius: 2px;
-            background-color: var(--rt-button-fill-red-background-color);
-            box-shadow: 0 2px 4px rgb(24 24 24 / 10%);
-            color: var(--rt-button-fill-red-color);
-
-            &:hover {
-                background-color: var(--rt-button-fill-red-hover-background-color);
-            }
-
-            &[class*='-light'] {
-                border-color: var(--rt-button-fill-red-light-border-color);
-                background-color: var(--rt-button-fill-red-light-background-color);
-                color: var(--rt-button-fill-red-light-color);
-
-                &:hover {
-                    background-color: var(--rt-button-fill-red-light-hover-background-color);
-                }
-            }
-        }
-    }
-
-    // --fill-{color}
-
-    // OUTLINE
-    &[class*='--outline-'] {
-        border: var(--rt-button-outline-border);
-        border-radius: mixins.rem(40);
-        background-color: transparent;
-
-        &[class*='blue'] {
-            color: var(--rt-button-outline-blue-color);
-        }
-
-        &[class*='base'] {
-            color: var(--rt-button-outline-base-color);
-        }
-    }
-
-    // --outline-{color}
-
-    // SIZE
-    &[class*='--size'] {
-        &[class*='-sm'] {
-            height: 1.75rem;
-            padding: 0 0.75rem;
-            font-size: mixins.rem(14);
-
-            svg + span {
-                margin-left: 0.75rem;
-            }
-        }
-
-        &[class*='-md'] {
-            height: 2.5rem;
-            padding: 0 1.25rem;
-            font-size: mixins.rem(18);
-
-            svg + span {
-                margin-left: mixins.rem(15);
-            }
-        }
-
-        &[class*='-l'] {
-            height: mixins.rem(60);
-            padding: 0 2.5rem;
-            font-size: mixins.rem(18);
-        }
-    }
-
-    // --size-{size}
-
-    // HEIGHT
-    &[class*='--h-'] {
-        &[class*='40'] {
-            height: 40px;
-            padding: 0 15px;
-        }
-
-        &[class*='30'] {
-            height: 30px;
-            padding: 0 10px;
-        }
-    }
-
-    // --h-{height}
-
-    // SHADOW
-    &[class*='--shadow'] {
-        box-shadow: 0 2px 4px rgb(24 24 24 / 10%);
-    }
-
-    // --shadow
-
-    // DISABLED
-    &[class*='--disabled'] {
-        background-color: var(--rt-button-disabled-background-color) !important;
-        color: var(--rt-button-disabled-color) !important;
-        cursor: not-allowed !important;
-    }
-
-    // --disabled
-}