@acorex/styles 4.0.24 → 5.0.4

package/scss/bases/typography.scss

@@ -1,210 +0,0 @@
-@import "../../variables/bases/typography";
-@import "../../variables/bases/color";
-// Font Family
-.ax-font-inherit {
-    font-family: inherit;
-}
-@each $key, $value in $font-faces {
-    .ax-font-#{$key} {
-        font-family: $value + ", " + $font-faces-alter;
-    }
-}
-
-// Font Size
-.ax-text-inherit {
-    font-size: inherit;
-}
-@each $key, $value in $font-sizes {
-    .ax-#{$key} {
-        font-size: map-get($value, "font-size");
-        line-height: map-get($value, "line-hight");
-    }
-}
-
-// Font Smoothing
-.ax-antialiased {
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-}
-.ax-subpixel-antialiased {
-    -webkit-font-smoothing: auto;
-    -moz-osx-font-smoothing: auto;
-}
-
-// Font Style
-.ax-italic {
-    font-style: italic;
-}
-.ax-not-italic {
-    font-style: normal;
-}
-
-// Font Weight
-@each $key, $value in $font-weight {
-    .ax-font-#{$key} {
-        font-weight: $value;
-    }
-}
-
-// Font Variant Numeric
-@each $key, $value in $font-variant-numeric {
-    .ax-font-#{$key} {
-        font-variant-numeric: $value;
-    }
-}
-
-// Letter Spacing
-@each $key, $value in $letter-spacing {
-    .ax-tracking-#{$key} {
-        letter-spacing: $value;
-    }
-}
-
-// Line Height
-@each $key, $value in $line-heights {
-    .ax-leading-#{$key} {
-        line-height: $value;
-    }
-}
-
-// List Style Type
-@each $key, $value in $list-styles {
-    .ax-list-#{$key} {
-        list-style: $value;
-    }
-}
-
-// List Style Position
-@each $key, $value in $list-style-position {
-    .ax-list-#{$key} {
-        list-style-position: $value;
-    }
-}
-
-// Placeholder
-@each $name, $color in $theme-colors {
-    @if (type-of($color) == "map") {
-        @each $subname, $variant in $color {
-            @if ($subname != "") {
-                .ax-placeholder-#{$name}-#{$subname} {
-                    @include placeholder {
-                        --ax-placeholder-opacity: 1;
-                        color: rgba(var(--ax-color-#{$name}-#{$subname}), var(--ax-placeholder-opacity));
-                    }
-                }
-            } @else {
-                .ax-placeholder-#{$name} {
-                    @include placeholder {
-                        --ax-placeholder-opacity: 1;
-                        color: rgba(var(--ax-color-#{$name}), var(--ax-placeholder-opacity));
-                    }
-                }
-            }
-        }
-    } @else {
-        .ax-placeholder-#{$name} {
-            @include placeholder {
-                --ax-placeholder-opacity: 1;
-                color: rgba(var(--ax-color-#{$name}), var(--ax-placeholder-opacity));
-            }
-        }
-    }
-}
-
-// Text Alignment
-@each $key, $value in $text-aligns {
-    .ax-text-#{$key} {
-        text-align: $value;
-    }
-}
-
-// Text Color
-.ax-text-transparent {
-    color: transparent;
-}
-.ax-text-current {
-    color: currentColor;
-}
-
-@each $name, $color in $theme-colors {
-    @if (type-of($color) == "map") {
-        @each $subname, $variant in $color {
-            @if ($subname != "") {
-                .ax-text-#{$name}-#{$subname} {
-                    --ax-text-opacity: 1;
-                    color: rgba(var(--ax-color-#{$name}-#{$subname}), var(--ax-text-opacity));
-                }
-            } @else {
-                .ax-text-#{$name} {
-                    --ax-text-opacity: 1;
-                    color: rgba(var(--ax-color-#{$name}), var(--ax-text-opacity));
-                }
-            }
-        }
-    } @else {
-        .ax-text-#{$name} {
-            --ax-text-opacity: 1;
-            color: rgba(var(--ax-color-#{$name}), var(--ax-text-opacity));
-        }
-    }
-}
-
-// Text Opacity
-@each $key, $value in $text-opcities {
-    .ax-text-opacity-#{$key} {
-        --ax-text-opacity: #{$value};
-    }
-}
-// Text Decoration
-@each $key, $value in $text-decorations {
-    .ax-#{$key} {
-        text-decoration: $value;
-    }
-}
-
-// Text Transform
-@each $key, $value in $text-transforms {
-    .ax-#{$key} {
-        text-transform: $value;
-    }
-}
-
-// Text OverFlow
-.ax-truncate {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-.ax-overflow-ellipsis {
-    text-overflow: ellipsis;
-}
-.ax-overflow-clip {
-    text-overflow: clip;
-}
-
-// Vertical Align
-@each $key, $value in $vertical-aligns {
-    .ax-align-#{$key} {
-        vertical-align: $value;
-    }
-}
-
-// Whitespace
-@each $key, $value in $white-spaces {
-    .ax-whitespace-#{$key} {
-        white-space: $value;
-    }
-}
-
-// Word Break
-.ax-break-normal {
-    overflow-wrap: normal;
-    word-break: normal;
-}
-
-.ax-break-words {
-    overflow-wrap: break-word;
-}
-.ax-break-all {
-    word-break: break-all;
-}

package/scss/components/alert.scss

@@ -1,131 +0,0 @@
-.ax-alert {
-    @extend .ax-flex, .ax-bg-light-100, .ax-text-light-fore, .ax-px-3, .ax-py-2, .ax-items-baseline, .ax-rounded;
-
-    .ax-alert-icon {
-        // @extend .ax-mt-1;
-    }
-
-    .ax-alert-body {
-        @extend .ax-ml-2, .ax-flex-1;
-
-        .ax-alert-title {
-            @extend .ax-text-lg, .ax-font-medium;
-            a {
-                @extend .ax-text-current, .ax-font-bold;
-            }
-        }
-
-        .ax-alert-content {
-            @extend .ax-block;
-
-            ul {
-                @extend .ax-m-1, .ax-pl-1;
-            }
-
-            a {
-                @extend .ax-text-current, .ax-font-bold;
-            }
-        }
-
-        .ax-alert-footer {
-            .ax-alert-buttons {
-                @extend .ax-flex, .ax-mt-2;
-
-                .ax-alert-button {
-                    @extend .ax-font-bold, .ax-mr-0\.5, .ax-cursor-pointer, .ax-py-1, .ax-px-2, .ax-rounded;
-                    transition: all 200ms;
-                }
-            }
-        }
-    }
-
-    .ax-alert-suffix {
-        .ax-alert-buttons {
-            .ax-alert-button {
-                @extend .ax-font-bold, .ax-mr-0\.5, .ax-cursor-pointer, .ax-py-1, .ax-px-2, .ax-rounded;
-                transition: all 200ms;
-                i {
-                    @extend .ax-mx-1;
-                }
-            }
-        }
-    }
-
-    &.ax-primary {
-        @extend .ax-bg-primary-50, .ax-text-primary;
-
-        .ax-alert-title {
-            @extend .ax-text-primary-700;
-        }
-        .ax-alert-button {
-            &:hover{
-                @extend .ax-bg-primary-100;
-            }
-        }
-    }
-
-    &.ax-secondary {
-        @extend .ax-bg-secondary-50, .ax-text-secondary;
-
-        .ax-alert-title {
-            @extend .ax-text-secondary-700;
-        }
-        .ax-alert-button {
-            &:hover{
-                @extend .ax-bg-secondary-100;
-            }
-        }
-    }
-
-    &.ax-success {
-        @extend .ax-bg-success-50, .ax-text-success;
-
-        .ax-alert-title {
-            @extend .ax-text-success-700;
-        }
-        .ax-alert-button {
-            &:hover{
-                @extend .ax-bg-success-100;
-            }
-        }
-    }
-
-    &.ax-warning {
-        @extend .ax-bg-warning-50, .ax-text-warning;
-
-        .ax-alert-title {
-            @extend .ax-text-warning-700;
-        }
-        .ax-alert-button {
-            &:hover{
-                @extend .ax-bg-warning-100;
-            }
-        }
-    }
-
-    &.ax-danger {
-        @extend .ax-bg-danger-50, .ax-text-danger;
-
-        .ax-alert-title {
-            @extend .ax-text-danger-700;
-        }
-        .ax-alert-button {
-            &:hover{
-                @extend .ax-bg-danger-100;
-            }
-        }
-    }
-
-    &.ax-info {
-        @extend .ax-bg-info-50, .ax-text-info;
-
-        .ax-alert-title {
-            @extend .ax-text-info-700;
-        }
-        .ax-alert-button {
-            &:hover{
-                @extend .ax-bg-info-100;
-            }
-        }
-    }
-}

package/scss/components/badge.scss

@@ -1,6 +0,0 @@
-.ax-badge {
-    @extend .ax-max-w-max, .ax-px-2, .ax-rounded, .ax-cursor-pointer, .ax-text-inherit;
-    &.ax-badge-rounded-full {
-        @extend .ax-rounded-full;
-    }
-}

package/scss/components/button.scss

@@ -1,264 +0,0 @@
-@import "../../variables/bases/color";
-@import "../../variables/bases/accessiblity";
-
-.ax-button {
-    font-family: inherit;
-    height: calc(var(--ax-base-size) * var(--ax-base-ratio));
-    line-height: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2);
-    vertical-align: middle;
-    font-size: 1rem;
-    @extend .ax-inline-flex,
-        .ax-items-center,
-        .ax-justify-center,
-        .ax-border,
-        .ax-border-color-transparent,
-        .ax-font-medium,
-        .ax-rounded,
-        .ax-relative,
-        .ax-overflow-hidden,
-        .ax-cursor-pointer,
-        .ax-px-2\.5;
-
-    &.ax-button-icon {
-        .ax-ic {
-            vertical-align: unset;
-        }
-    }
-    &.ax-state-disabled {
-        background-color: rgb(var(--ax-color-disabled)) !important;
-        color: rgb(var(--ax-color-disabled-fore)) !important;
-        cursor: not-allowed !important;
-    }
-
-    &.ax-state-loading {
-        > * {
-            opacity: 0;
-        }
-        > .ax-loading-text {
-            opacity: 1;
-        }
-        &::before {
-            content: "";
-            box-sizing: border-box;
-            position: absolute;
-            top: 0;
-            left: 0;
-            bottom: 0;
-            right: 0;
-            margin: auto;
-            width: calc((var(--ax-base-size) * 2) + (var(--ax-base-size) / 2));
-            height: calc((var(--ax-base-size) * 2) + (var(--ax-base-size) / 2));
-            border-radius: 50%;
-            border: 2px solid rgb(var(--ax-color-dark-100));
-            border-top-color: rgb(var(--ax-color-dark));
-            animation: spinner 0.8s linear infinite;
-        }
-    }
-}
-@each $name, $color in $theme-colors {
-    .ax-button {
-        @if (type-of($color) == "map" and $name != "gray") {
-            &.ax-#{$name} {
-                @extend .ax-shadow-sm;
-
-                @if ($name== "warning" or $name== "light") {
-                    @extend .ax-bg-#{$name}, .ax-text-#{$name}-900;
-                } @else {
-                    @extend .ax-bg-#{$name}, .ax-text-#{$name}-fore;
-                }
-
-                &:hover {
-                    @if ($name== "warning" or $name== "light") {
-                        @extend .ax-bg-#{$name}-600, .ax-text-white;
-                    } @else {
-                        @extend .ax-bg-#{$name}-600, .ax-text-#{$name}-fore;
-                    }
-                }
-
-                &:focus {
-                    @if ($name== "warning" or $name== "light") {
-                        @extend .ax-bg-#{$name}-600, .ax-text-white;
-                    } @else {
-                        @extend .ax-bg-#{$name}-600, .ax-text-#{$name}-fore;
-                    }
-                }
-
-                &:active {
-                    @if ($name== "warning" or $name== "light") {
-                        @extend .ax-bg-#{$name}-700, .ax-text-white;
-                    } @else {
-                        @extend .ax-bg-#{$name}-700, .ax-text-#{$name}-fore;
-                    }
-                }
-
-                &.ax-state-selected {
-                    @extend .ax-bg-#{$name}-800, .ax-text-#{$name}-fore;
-                }
-
-                &.ax-state-loading {
-                    @extend .ax-bg-#{$name}-300, .ax-text-#{$name}-fore;
-                }
-            }
-
-            &.ax-#{$name}-outline {
-                @if ($name== "light" or $name== "warning") {
-                    @extend .ax-bg-transparent,
-                        .ax-text-#{$name}-600,
-                        .ax-border,
-                        .ax-border-solid,
-                        .ax-border-color-#{$name}-600;
-                } @else {
-                    @extend .ax-bg-transparent,
-                        .ax-text-#{$name},
-                        .ax-border,
-                        .ax-border-solid,
-                        .ax-border-color-#{$name};
-                }
-
-                &:hover {
-                    @extend .ax-bg-#{$name}, .ax-text-#{$name}-fore;
-                }
-
-                &:focus {
-                    @extend .ax-bg-#{$name}-400, .ax-text-#{$name}-fore;
-                }
-
-                &:active {
-                    @if ($name== "light" or $name== "warning") {
-                        @extend .ax-bg-#{$name}-600, .ax-text-white;
-                    } @else {
-                        @extend .ax-bg-#{$name}-600, .ax-text-#{$name}-fore;
-                    }
-                }
-
-                &.ax-state-selected {
-                    @extend .ax-bg-#{$name}-600, .ax-text-#{$name}-fore, .ax-border-color-#{$name}-600;
-                }
-
-                &.ax-state-loading {
-                    @if ($name== "light") {
-                        @extend .ax-bg-#{$name}-100, .ax-text-#{$name}-fore, .ax-border-color-#{$name}-100;
-                    } @else {
-                        @extend .ax-bg-#{$name}-100, .ax-border-color-#{$name}-100;
-                        color: rgb(var(--ax-color-#{$name})) !important;
-                    }
-                }
-                &.ax-state-disabled {
-                    border-color: transparent !important;
-                }
-            }
-
-            &.ax-#{$name}-twotone {
-                @extend .ax-border-color-transparent, .ax-bg-#{$name}-100;
-
-                @if ($name== "light" or $name== "warning") {
-                    @extend .ax-text-#{$name}-fore;
-                } @else {
-                    @extend .ax-text-#{$name};
-                }
-
-                &:hover {
-                    @if ($name== "dark") {
-                        @extend .ax-bg-#{$name}-200, .ax-text-#{$name}-fore;
-                    } @else {
-                        @extend .ax-bg-#{$name}-200, .ax-text-#{$name}-700;
-                    }
-                }
-
-                &:focus {
-                    @if ($name== "light" or $name== "dark" or $name== "warning") {
-                        @extend .ax-bg-#{$name}-200, .ax-text-#{$name}-fore;
-                    } @else {
-                        @extend .ax-bg-#{$name}-200, .ax-text-#{$name}-700;
-                    }
-                }
-
-                &:active {
-                    @if ($name== "dark") {
-                        @extend .ax-bg-#{$name}-300, .ax-text-#{$name}-fore;
-                    } @else {
-                        @extend .ax-bg-#{$name}-300, .ax-text-#{$name}-fore;
-                    }
-                }
-
-                &.ax-state-selected {
-                    background-color: rgb(var(--ax-color-#{$name}-200));
-                }
-
-                &.ax-state-loading {
-                    @if ($name== "light" or $name== "warning") {
-                        @extend .ax-bg-#{$name}-100, .ax-text-#{$name}-fore;
-                    } @else {
-                        @extend .ax-bg-#{$name}-200, .ax-text-#{$name};
-                    }
-                }
-            }
-
-            &.ax-#{$name}-blank {
-                @extend .ax-bg-transparent, .ax-border-color-transparent;
-
-                @if ($name== "light") {
-                    @extend .ax-text-#{$name}-700;
-                } @else {
-                    @extend .ax-text-#{$name}-500;
-                }
-
-                &:hover {
-                    @extend .ax-bg-#{$name}-100;
-                }
-
-                &:active {
-                    @extend .ax-bg-#{$name}-100, .ax-text-#{$name}-700;
-                }
-
-                &.ax-state-selected {
-                    @if ($name== "light") {
-                        @extend .ax-text-#{$name}-fore, .ax-bg-#{$name}-500;
-                    } @else {
-                        @extend .ax-text-#{$name}, .ax-bg-#{$name}-100;
-                    }
-                }
-
-                &.ax-state-disabled {
-                    background-color: transparent !important;
-                }
-            }
-        }
-    }
-}
-
-@keyframes spinner {
-    to {
-        transform: rotate(360deg);
-    }
-}
-
-.ax-dropdown-button {
-    display: inline-flex;
-    @extend .ax-overflow-hidden, .ax-rounded;
-    .ax-button {
-        border-radius: 0 !important;
-    }
-}
-
-.ax-dropdown-button-container {
-    .ax-dropdown-item {
-        &.ax-state-selected {
-            @extend .ax-bg-primary-100, .ax-text-primary;
-        }
-    }
-}
-
-.ax-button-group {
-    @extend .ax-rounded, .ax-flex, .ax-items-center, .ax-border, .ax-max-w-max;
-
-    .ax-button {
-        @extend .ax-rounded-none;
-        &:first-child {
-            @extend .ax-border-r-0, .ax-rounded-l;
-        }
-        &:last-child {
-            @extend .ax-border-l-0, .ax-rounded-r;
-        }
-    }
-}