@g1cloud/bluesea 5.0.0-beta.8 → 6.0.0-alpha.0

package/scss/variable.scss

@@ -1,347 +0,0 @@
-@use "sass:map";
-
-:root {
-  --font-size: 13px;
-  --font-size-input: 13px;
-  --font-size-button: 13px;
-}
-
-body {
-  font-size: var(--font-size);
-}
-
-input {
-  font-size: var(--font-size-input);
-  padding-top: 2px;
-}
-
-button {
-  font-size: var(--font-size-button);
-}
-
-textarea {
-  font-size: var(--font-size-input);
-}
-
-// Color
-$white: #ffffff !default;
-$black: #000000 !default;
-
-$gray-100: #FAFAFA !default;
-$gray-200: #EAEAEA !default;
-$gray-300: #CCCCCC !default;
-$gray-400: #A9A9A9 !default;
-$gray-500: #666666 !default;
-$gray-600: #555555 !default;
-$gray-700: #444444 !default;
-$gray-800: #292929 !default;
-
-$primary-100: #EAF1FE !default;
-$primary-200: #DDEEFF !default;
-$primary-300: #B7D2FA !default;
-$primary-400: #A4B4FF !default;
-$primary-500: #5672EF !default;
-$primary-600: #232E8F !default;
-
-$blue: $primary-500 !default;
-$blue-bg: $primary-200 !default;
-$red: #EB0000 !default;
-$red-bg: #FFE3E2 !default;
-$orange: #F99341 !default;
-$orange-bg: #FFF8DE !default;
-$green: #2FA04D !default;
-$green-bg: #E9FEE7 !default;
-$purple: #945BD9 !default;
-$purple-bg: #EAD8FF !default;
-$gray-bg: $gray-200 !default;
-
-$color-text: $gray-600 !default;
-$color-text-light: $gray-400 !default;
-
-$color-gray: $gray-500 !default;
-$color-gray-border: $gray-300 !default;
-
-$color-icon-light: #D5D5D5 !default;
-$border: $gray-300 !default;
-$border-light: $gray-200 !default;
-$color-hover: #E8EEFC !default;
-$color-focus: $primary-500 !default;
-$color-error: $red !default;
-
-$primary: $primary-500 !default;
-$secondary: $orange !default;
-$success: $green !default;
-$info: $primary-500 !default;
-$warning: $orange !default;
-$danger: $red !default;
-$light: $gray-100 !default;
-$dark: $gray-700 !default;
-$gray: $gray-400 !default;
-
-//border
-$border-width: 1px !default;
-$border-radius: .25rem !default;
-$border-radius-lg: .3rem !default;
-$border-radius-sm: .2rem !default;
-$rounded-pill: 50rem !default;
-$rounded-circle: 50% !default;
-$border-input: 0.8px solid $border-light;
-
-//icon-font
-$icon-font-family: "Material Symbols Outlined", monospace;
-
-:root {
-  --white: #{$white};
-  --black: #{$black};
-
-  --gray-100: #{$gray-100};
-  --gray-200: #{$gray-200};
-  --gray-300: #{$gray-300};
-  --gray-400: #{$gray-400};
-  --gray-500: #{$gray-500};
-  --gray-600: #{$gray-600};
-  --gray-700: #{$gray-700};
-  --gray-800: #{$gray-800};
-
-  --primary-100: #{$primary-100};
-  --primary-200: #{$primary-200};
-  --primary-300: #{$primary-300};
-  --primary-400: #{$primary-400};
-  --primary-500: #{$primary-500};
-  --primary-600: #{$primary-600};
-
-  --blue: #{$blue};
-  --blue-bg: #{$blue-bg};
-  --red: #{$red};
-  --red-bg: #{$red-bg};
-  --orange: #{$orange};
-  --orange-bg: #{$orange-bg};
-  --green: #{$green};
-  --green-bg: #{$green-bg};
-  --purple: #{$purple};
-  --purple-bg: #{$purple-bg};
-  --gray-bg: #{$gray-bg};
-
-  --color-text: #{$color-text};
-  --color-text-light: #{$color-text-light};
-  --color-gray: #{$color-gray};
-  --color-gray-border: #{$color-gray-border};
-  --color-icon-light: #{$color-icon-light};
-  --border: #{$border};
-  --border-light: #{$border-light};
-  --color-hover: #{$color-hover};
-  --color-focus: #{$color-focus};
-  --color-error: #{$color-error};
-
-  --primary: #{$primary};
-  --secondary: #{$secondary};
-  --success: #{$success};
-  --info: #{$info};
-  --warning: #{$warning};
-  --danger: #{$danger};
-  --light: #{$light};
-  --dark: #{$dark};
-  --gray: #{$gray};
-
-  --border-width: #{$border-width};
-  --border-radius: #{$border-radius};
-  --border-radius-lg: #{$border-radius-lg};
-  --border-radius-sm: #{$border-radius-sm};
-  --rounded-pill: #{$rounded-pill};
-  --rounded-circle: #{$rounded-circle};
-  --border-input: #{$border-input};
-
-  --icon-font-family: #{$icon-font-family};
-}
-
-$colors: () !default;
-$colors: map.merge(
-                (
-                        "white": $white,
-                        "black": $black,
-                        "gray-100": $gray-100,
-                        "gray-200": $gray-200,
-                        "gray-300": $gray-300,
-                        "gray-400": $gray-400,
-                        "gray-500": $gray-500,
-                        "gray-600": $gray-600,
-                        "gray-700": $gray-700,
-                        "primary-100": $primary-100,
-                        "primary-200": $primary-200,
-                        "primary-300": $primary-300,
-                        "primary-400": $primary-400,
-                        "primary-500": $primary-500,
-                        "primary-600": $primary-600,
-                        "orange": $orange,
-                        "green": $green,
-                        "red": $red,
-                        "blue": $blue,
-                        "primary": $primary,
-                        "secondary": $secondary,
-                        "success": $success,
-                        "info": $info,
-                        "warning": $warning,
-                        "danger": $danger,
-                        "light": $light,
-                        "dark": $dark,
-                        "gray": $gray,
-                        "purple": $purple
-                ),
-                $colors
-);
-
-
-// Default theme color
-$header-bg: $primary;
-$header-text: $white;
-$body-bg: $white;
-$body-text: $black;
-$button-default-bg: $white;
-$button-default-text: $gray-600;
-$header-tab-bg: $primary-400;
-$header-tab-selected: $white;
-$header-tab-text: $gray-600;
-$border: $gray-300;
-$border-light: $gray-200;
-$border-hover: $black;
-$color-hover: #E8EEFC;
-$colored-bg: $primary-100;
-$radio-group: $gray;
-$gray-100: $gray-100;
-$gray-200: $gray-200;
-$gray-400: $gray-400;
-$gray-500: $gray-500;
-$primary-100: $primary-100;
-$primary-200: $primary-200;
-$primary-300: $primary-300;
-
-// Dark theme color
-$header-bg-dark: #26282a;
-$header-text-dark: $gray-200;
-$body-bg-dark: #1c1d1f;
-$body-text-dark: $gray-300;
-$button-default-bg-dark: tranperant;
-$button-default-text-dark: $gray-300;
-$header-tab-bg-dark: #3b3d41;
-$header-tab-selected-dark: #1c1d1f;
-$header-tab-text-dark: $white;
-$border-dark: $gray-700;
-$border-light-dark: $gray-600;
-$border-hover-dark: $gray-600;
-$color-hover-dark: $gray-700;
-$colored-bg-dark: #414244;
-$radio-group-dark: $gray-600;
-$gray-100-dark: $gray-800;
-$gray-200-dark: $gray-700;
-$gray-400-dark: $gray-500;
-$gray-500-dark: $gray-400;
-$primary-100-dark: $primary-600;
-$primary-200-dark: $primary-600;
-$primary-300-dark: $primary-500;
-
-
-// Mixins
-@mixin theme(
-  $header-bg,
-  $header-text,
-  $body-bg,
-  $body-text,
-  $button-default-bg,
-  $button-default-text,
-  $header-tab-bg,
-  $header-tab-selected,
-  $header-tab-text,
-  $border,
-  $border-light,
-  $border-hover,
-  $color-hover,
-  $colored-bg,
-  $radio-group,
-  $gray-100,
-  $gray-200,
-  $gray-400,
-  $gray-500,
-  $primary-100,
-  $primary-200,
-  $primary-300,
-) {
-  --header-bg: #{$header-bg};
-  --header-text: #{$header-text};
-  --body-bg: #{$body-bg};
-  --body-text: #{$body-text};
-  --button-default-bg: #{$button-default-bg};
-  --button-default-text: #{$button-default-text};
-  --header-tab-bg: #{$header-tab-bg};
-  --header-tab-selected: #{$header-tab-selected};
-  --header-tab-text: #{$header-tab-text};
-  --border: #{$border};
-  --border-light: #{$border-light};
-  --border-hover: #{$border-hover};
-  --color-hover: #{$color-hover};
-  --colored-bg: #{$colored-bg};
-  --radio-group: #{$radio-group};
-  --gray-100: #{$gray-100};
-  --gray-200: #{$gray-200};
-  --gray-400: #{$gray-400};
-  --gray-500: #{$gray-500};
-  --primary-100: #{$primary-100};
-  --primary-200: #{$primary-200};
-  --primary-300: #{$primary-300};
-}
-
-// Default theme
-:root {
-  @include theme(
-                  $header-bg,
-                  $header-text,
-                  $body-bg,
-                  $body-text,
-                  $button-default-bg,
-                  $button-default-text,
-                  $header-tab-bg,
-                  $header-tab-selected,
-                  $header-tab-text,
-                  $border,
-                  $border-light,
-                  $border-hover,
-                  $color-hover,
-                  $colored-bg,
-                  $radio-group,
-                  $gray-100,
-                  $gray-200,
-                  $gray-400,
-                  $gray-500,
-                  $primary-100,
-                  $primary-200,
-                  $primary-300,
-  );
-}
-
-// Dark theme
-[data-theme="dark"] {
-  @include theme(
-                  $header-bg-dark,
-                  $header-text-dark,
-                  $body-bg-dark,
-                  $body-text-dark,
-                  $button-default-bg-dark,
-                  $button-default-text-dark,
-                  $header-tab-bg-dark,
-                  $header-tab-selected-dark,
-                  $header-tab-text-dark,
-                  $border-dark,
-                  $border-light-dark,
-                  $border-hover-dark,
-                  $color-hover-dark,
-                  $colored-bg-dark,
-                  $radio-group-dark,
-                  $gray-100-dark,
-                  $gray-200-dark,
-                  $gray-400-dark,
-                  $gray-500-dark,
-                  $primary-100-dark,
-                  $primary-200-dark,
-                  $primary-300-dark,
-  );
-}
-