@rt-tools/ui-kit 0.0.4

package/src/styles/components/_rtui_button.scss

@@ -0,0 +1,452 @@
+@use '../base/mixin' as mixins;
+
+$rtui-button: (
+    base: (
+        width: auto,
+        bg: transparent,
+        border: 0,
+        color: var(--clr-black-80),
+        display: inline-flex,
+        font-size: 0,
+        gap: 0,
+        padding: 0,
+        shadow: 0,
+        shadow-blur: 8px,
+    ),
+    accent: (
+        border: 1px solid var(--clr-blue-100),
+        color: var(--clr-white-100),
+        bg: var(--clr-blue-60),
+        hover-bg: var(--clr-blue-40),
+        active-shadow: var(--clr-blue-40),
+    ),
+    accent-outline: (
+        border: 1px solid var(--clr-blue-100),
+        bg: var(--clr-blue-20),
+        color: var(--clr-blue-100),
+        hover-border: 1px solid var(--clr-blue-80),
+        hover-bg: var(--clr-white-100),
+        active-shadow: var(--clr-blue-40),
+    ),
+    accent-light: (
+        color: var(--clr-blue-100),
+        bg: var(--clr-blue-40),
+        hover-color: var(--clr-blue-80),
+        hover-bg: var(--clr-blue-20),
+        active-shadow: var(--clr-blue-40),
+    ),
+    success: (
+        border: 1px solid var(--clr-green-100),
+        color: var(--clr-white-100),
+        bg: var(--clr-green-80),
+        hover-bg: var(--clr-green-60),
+        active-shadow: var(--clr-green-40),
+    ),
+    success-outline: (
+        border: 1px solid var(--clr-green-100),
+        bg: var(--clr-green-20),
+        color: var(--clr-green-100),
+        hover-border: 1px solid var(--clr-green-80),
+        hover-bg: var(--clr-white-100),
+        active-shadow: var(--clr-green-40),
+    ),
+    success-light: (
+        color: var(--clr-green-100),
+        bg: var(--clr-green-20),
+        hover-color: var(--clr-green-80),
+        hover-bg: var(--clr-green-10),
+        active-shadow: var(--clr-green-40),
+    ),
+    secondary: (
+        border: 1px solid var(--clr-black-60),
+        color: var(--clr-white-100),
+        bg: var(--clr-black-60),
+        hover-bg: var(--clr-black-40),
+        active-shadow: var(--clr-black-40),
+    ),
+    secondary-outline: (
+        border: 1px solid var(--clr-black-60),
+        bg: var(--clr-black-20),
+        color: var(--clr-black-60),
+        hover-bg: var(--clr-white-100),
+        active-shadow: var(--clr-black-40),
+    ),
+    secondary-light: (
+        color: var(--clr-black-80),
+        bg: var(--clr-black-40),
+        hover-color: var(--clr-black-60),
+        hover-bg: var(--clr-black-20),
+        active-shadow: var(--clr-black-40),
+    ),
+    error: (
+        border: 1px solid var(--clr-red-100),
+        color: var(--clr-white-100),
+        bg: var(--clr-red-80),
+        hover-bg: var(--clr-red-60),
+        active-shadow: var(--clr-red-40),
+    ),
+    error-outline: (
+        border: 1px solid var(--clr-red-100),
+        bg: var(--clr-red-10),
+        color: var(--clr-red-100),
+        hover-bg: var(--clr-white-100),
+        active-shadow: var(--clr-red-40),
+    ),
+    error-light: (
+        color: var(--clr-red-100),
+        bg: var(--clr-red-40),
+        hover-bg: var(--clr-red-10),
+        active-shadow: var(--clr-red-40),
+    ),
+    warning: (
+        border: 1px solid var(--clr-orange-100),
+        color: var(--clr-white-100),
+        bg: var(--clr-orange-80),
+        hover-bg: var(--clr-orange-60),
+        active-shadow: var(--clr-orange-40),
+    ),
+    warning-outline: (
+        border: 1px solid var(--clr-orange-100),
+        bg: var(--clr-orange-10),
+        color: var(--clr-orange-100),
+        hover-bg: var(--clr-white-100),
+        active-shadow: var(--clr-orange-40),
+    ),
+    warning-light: (
+        color: var(--clr-orange-100),
+        bg: var(--clr-orange-10),
+        hover-bg: var(--clr-orange-5),
+        active-shadow: var(--clr-orange-40),
+    ),
+    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);
+
+    width: var(--width);
+    align-items: center;
+    background-color: var(--bg);
+    border: var(--border);
+    border-radius: 6px;
+    box-shadow: var(--shadow);
+    color: var(--color);
+    cursor: pointer;
+    display: var(--display);
+    font-size: var(--font-size);
+    font-weight: 600;
+    gap: var(--gap);
+    justify-content: center;
+    line-height: 1;
+    padding: var(--padding);
+    transition:
+        background-color 0.15s linear,
+        color 0.15s linear,
+        box-shadow 0.15s linear,
+        border-color 0.15s linear;
+    text-decoration: none;
+
+    &:focus {
+        outline: none;
+    }
+
+    &:focus-visible {
+        outline: 2px dashed var(--clr-blue-40);
+        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);
+    }
+}
+
+/* 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/_snackbar.scss

@@ -0,0 +1,103 @@
+@use '../base/mixin' as mixins;
+
+$snack-bar: (
+    default: (
+        background-color: var(--clr-black-80),
+    ),
+    success: (
+        background-color: var(--clr-green-80),
+    ),
+    success-text: (
+        color: var(--clr-white-100),
+    ),
+    success-action: (
+        color: var(--clr-black-80),
+    ),
+    success-close-button: (
+        color: var(--clr-white-100),
+    ),
+    warning: (
+        background-color: var(--clr-orange-80),
+    ),
+    warning-text: (
+        color: var(--clr-white-100),
+    ),
+    warning-action: (
+        color: var(--clr-black-80),
+    ),
+    warning-close-button: (
+        color: var(--clr-white-100),
+    ),
+    danger: (
+        background-color: var(--clr-red-100),
+    ),
+    danger-text: (
+        color: var(--clr-white-100),
+    ),
+    danger-action: (
+        color: var(--clr-black-80),
+    ),
+    danger-close-button: (
+        color: var(--clr-white-100),
+    ),
+);
+
+:root {
+    @each $element, $elements in $snack-bar {
+        @each $style-token, $value in $elements {
+            #{mixins.generateCssVar('snack-bar', #{$element}, #{$style-token})}: #{$value};
+        }
+    }
+
+    --mat-snack-bar-container-color: var(--rt-snack-bar-default-background-color);
+    --mdc-snackbar-supporting-text-color: var(--clr-white-100);
+    --mdc-snackbar-container-shape: 0.5rem;
+}
+
+.snack-bar-success-colored {
+    --mat-snack-bar-container-color: var(--rt-snack-bar-success-background-color);
+    --mdc-snackbar-supporting-text-color: var(--rt-snack-bar-success-text-color);
+
+    rtui-snack-bar {
+        --rt-snack-bar-action-color: var(--rt-snack-bar-success-action-color);
+        --rt-snack-bar-close-button-color: var(--rt-snack-bar-success-close-button-color);
+    }
+}
+
+.snack-bar-warning-colored {
+    --mat-snack-bar-container-color: var(--rt-snack-bar-warning-background-color);
+    --mdc-snackbar-supporting-text-color: var(--rt-snack-bar-warning-text-color);
+
+    rtui-snack-bar {
+        --rt-snack-bar-action-color: var(--rt-snack-bar-warning-action-color);
+        --rt-snack-bar-close-button-color: var(--rt-snack-bar-warning-close-button-color);
+    }
+}
+
+.snack-bar-danger-colored {
+    --mat-snack-bar-container-color: var(--rt-snack-bar-danger-background-color);
+    --mdc-snackbar-supporting-text-color: var(--rt-snack-bar-danger-text-color);
+
+    rtui-snack-bar {
+        --rt-snack-bar-action-color: var(--rt-snack-bar-danger-action-color);
+        --rt-snack-bar-close-button-color: var(--rt-snack-bar-danger-close-button-color);
+    }
+}
+
+.snack-bar-success {
+    rtui-snack-bar {
+        --rt-snack-bar-icon-color: var(--rt-snack-bar-success-background-color);
+    }
+}
+
+.snack-bar-warning {
+    rtui-snack-bar {
+        --rt-snack-bar-icon-color: var(--rt-snack-bar-warning-background-color);
+    }
+}
+
+.snack-bar-danger {
+    rtui-snack-bar {
+        --rt-snack-bar-icon-color: var(--rt-snack-bar-danger-background-color);
+    }
+}