diff --git a/package.json b/package.json index 1bd5485b..c63c68c6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "tksui-components", - "version": "0.7.12", + "version": "0.7.14", "private": false, "type": "module", "module": "lib/esm/index.js", diff --git a/src/components/icon/TIconOriginal.tsx b/src/components/icon/TIconOriginal.tsx index 330900d1..b01ef045 100644 --- a/src/components/icon/TIconOriginal.tsx +++ b/src/components/icon/TIconOriginal.tsx @@ -1,3 +1,5 @@ +import themeToken from '~style/designToken/ThemeToken.module.scss'; + /* eslint-disable max-len */ const TOriginalImage = { @@ -14,31 +16,29 @@ const TOriginalImage = { ), t_checkbox_read_only_on: ( - - - - + + ), t_checkbox_read_only_off: ( - + ), t_checkbox_disabled_on: ( - - + ), t_checkbox_disabled_off: ( - + ), @@ -68,7 +68,7 @@ const TOriginalImage = { ), t_radio_disabled_off: ( - + diff --git a/src/styles/component/data-container/data-grid/TDataGrid.scss b/src/styles/component/data-container/data-grid/TDataGrid.scss index 844dba32..e397be1a 100644 --- a/src/styles/component/data-container/data-grid/TDataGrid.scss +++ b/src/styles/component/data-container/data-grid/TDataGrid.scss @@ -44,14 +44,14 @@ --ag-checkbox-checked-color: #{$t-primary-color}; --ag-checkbox-indeterminate-color: #{$t-primary-color}; - --ag-checkbox-unchecked-color: #{$t-border-color--default}; + --ag-checkbox-unchecked-color: #{$t-gray-color-3}; --ag-checkbox-border-radius: 50%; --ag-checkbox-background-color: transparent; --ag-input-focus-box-shadow: none; --ag-cell-horizontal-padding: 32px; - --ag-row-border-color: #{$t-grid-border-color--02}; + --ag-row-border-color: #{$t-blue-gray-color-2}; --ag-header-cell-hover-background-color: #{$t-blue-gray-color-3}; --ag-header-background-color: #{$t-white-color}; @@ -115,7 +115,7 @@ } .ag-overlay-no-rows-wrapper { - border-bottom: 1px solid $t-grid-border-color--01; + border-bottom: 1px solid $t-blue-gray-color-2; } .ag-layout-print .ag-center-cols-clipper, diff --git a/src/styles/component/data-container/drop-holder/TDropHolder.scss b/src/styles/component/data-container/drop-holder/TDropHolder.scss index 8df7771f..be59a3fb 100644 --- a/src/styles/component/data-container/drop-holder/TDropHolder.scss +++ b/src/styles/component/data-container/drop-holder/TDropHolder.scss @@ -48,11 +48,6 @@ &.t-drop-holder__items__item--divider { border-top: 1px solid $t-blue-gray-color-3; } - &.t-drop-holder__items__item--selected { - background: $t-background-color--hover; - color: $t-font-color--selected; - font-weight: $t-font-weight--selected; - } &.t-drop-holder__items__item--disabled { pointer-events: none; cursor: default; @@ -61,8 +56,8 @@ .t-drop-holder__items__item__checkbox .t-checkbox__container:focus .t-checkbox__icon { outline: none; } - &.t-drop-holder__items__item--focused { background: $t-background-color--hover; } - &:hover { background: $t-background-color--hover; } + &.t-drop-holder__items__item--focused { background: $t-blue-gray-color-2; } + &:hover { background: $t-blue-gray-color-2; } } } diff --git a/src/styles/component/data-container/highlight-text/THighlightText.scss b/src/styles/component/data-container/highlight-text/THighlightText.scss index 696b00a0..63eac778 100644 --- a/src/styles/component/data-container/highlight-text/THighlightText.scss +++ b/src/styles/component/data-container/highlight-text/THighlightText.scss @@ -1,7 +1,7 @@ mark { - background: $t-primary-color--tint-7; + background: $t-secondary-color-blue; } diff --git a/src/styles/component/data-container/pagination/TPagination.scss b/src/styles/component/data-container/pagination/TPagination.scss index ac614275..273cbac3 100644 --- a/src/styles/component/data-container/pagination/TPagination.scss +++ b/src/styles/component/data-container/pagination/TPagination.scss @@ -17,7 +17,6 @@ @include icon-color($t-gray-color-4); &:hover { cursor: pointer; @include icon-color($t-primary-color);} - &:active { @include icon-color($t-primary-color--shade-2)} &.t-pagination__nav-button-container__button--disabled { @include icon-color($t-gray-color-2); @@ -82,7 +81,7 @@ &.t-number-field--failure { .t-number-field__container { - border-color: $t-status-color--error; + border-color: $t-status-color-error; } } diff --git a/src/styles/component/guide/badge/TBadge.scss b/src/styles/component/guide/badge/TBadge.scss index 9ee6b1e7..9c7f0f88 100644 --- a/src/styles/component/guide/badge/TBadge.scss +++ b/src/styles/component/guide/badge/TBadge.scss @@ -3,7 +3,7 @@ display: inline-flex; .t-badge-content { - background: $t-status-color--error; + background: $t-status-color-error; position: absolute; border-radius: 50px; @@ -35,4 +35,4 @@ } } -} \ No newline at end of file +} diff --git a/src/styles/component/guide/input-validation-hint/TInputValidationHint.scss b/src/styles/component/guide/input-validation-hint/TInputValidationHint.scss index 6498680f..55f52050 100644 --- a/src/styles/component/guide/input-validation-hint/TInputValidationHint.scss +++ b/src/styles/component/guide/input-validation-hint/TInputValidationHint.scss @@ -18,11 +18,11 @@ } &.t-input-validation-hint__rules__item--valid { - color: $t-status-color--success; + color: $t-status-color-success; } &.t-input-validation-hint__rules__item--invalid { - color: $t-status-color--error; + color: $t-status-color-error; } } } -} \ No newline at end of file +} diff --git a/src/styles/component/guide/toast/TToast.scss b/src/styles/component/guide/toast/TToast.scss index a714a9bb..0579527d 100644 --- a/src/styles/component/guide/toast/TToast.scss +++ b/src/styles/component/guide/toast/TToast.scss @@ -1,11 +1,7 @@ .tks-toast { --toastify-color-light: #{$t-white-color}; - - --toastify-text-color-info: #{$t-black-color}; - --toastify-text-color-success: #{$t-black-color}; - --toastify-text-color-warning: #{$t-black-color}; - --toastify-text-color-error: #{$t-black-color}; + --toastify-text-color-light: #{$t-gray-color-4}; --toastify-color-progress-light: #{$t-primary-color}; --toastify-color-progress-info: #{$t-primary-color}; @@ -54,9 +50,13 @@ } } - .Toastify__close-button > svg { - width: 20px; - height: 20px; + .Toastify__close-button { + color: $t-black-color; + + & > svg { + width: 20px; + height: 20px; + } } .Toastify__progress-bar { diff --git a/src/styles/component/guide/tooltip/TTooltip.scss b/src/styles/component/guide/tooltip/TTooltip.scss index f36c8b27..201f26fb 100644 --- a/src/styles/component/guide/tooltip/TTooltip.scss +++ b/src/styles/component/guide/tooltip/TTooltip.scss @@ -20,7 +20,6 @@ &.react-tooltip { border: 1px solid $t-gray-color-5; padding: $t-spacing-16 $t-spacing-16; - line-height: $t-line-height-body; .t-tooltip__title{ color: $t-gray-color-1; diff --git a/src/styles/component/input/checkbox-group/TCheckboxGroup.scss b/src/styles/component/input/checkbox-group/TCheckboxGroup.scss index 6d3620a3..4690b9c3 100644 --- a/src/styles/component/input/checkbox-group/TCheckboxGroup.scss +++ b/src/styles/component/input/checkbox-group/TCheckboxGroup.scss @@ -21,10 +21,10 @@ &.t-checkbox-group--failure { @include animation-shake(); - .t-checkbox-group__message {color: $t-status-color--error;} + .t-checkbox-group__message {color: $t-status-color-error;} } &.t-checkbox-group--success { - .t-checkbox-group__message {color: $t-status-color--success;} + .t-checkbox-group__message {color: $t-status-color-success;} } } diff --git a/src/styles/component/input/checkbox/TCheckbox.scss b/src/styles/component/input/checkbox/TCheckbox.scss index 5449653b..fa9e3dfe 100644 --- a/src/styles/component/input/checkbox/TCheckbox.scss +++ b/src/styles/component/input/checkbox/TCheckbox.scss @@ -52,11 +52,11 @@ @include animation-shake(); - .t-text-field__container {border-color: $t-status-color--error;} - .t-checkbox__message {color: $t-status-color--error;} + .t-text-field__container {border-color: $t-status-color-error;} + .t-checkbox__message {color: $t-status-color-error;} } &.t-checkbox--success { - .t-text-field__container {border-color: $t-status-color--success;} - .t-checkbox__message {color: $t-status-color--success;} + .t-text-field__container {border-color: $t-status-color-success;} + .t-checkbox__message {color: $t-status-color-success;} } } diff --git a/src/styles/component/input/dropdown/TDropdown.scss b/src/styles/component/input/dropdown/TDropdown.scss index 91b44689..0691ce7f 100644 --- a/src/styles/component/input/dropdown/TDropdown.scss +++ b/src/styles/component/input/dropdown/TDropdown.scss @@ -142,7 +142,7 @@ &.t-dropdown__items__item--selected { background: $t-blue-gray-color-1; color: $t-font-color--selected; - font-weight: $t-font-weight--selected; + @include typo-body-2; } .t-dropdown__items__item__checkbox .t-checkbox__container:focus .t-checkbox__icon { outline: none; } @@ -157,7 +157,7 @@ } } - &.t-dropdown__items__item--focused { background: $t-background-color--hover; } + &.t-dropdown__items__item--focused { background: $t-blue-gray-color-2; } &:focus-within { background: $t-blue-gray-color-1; } &:hover { background: $t-blue-gray-color-1; @@ -184,13 +184,13 @@ &.t-dropdown--failure { @include animation-shake(); - .t-dropdown__control {border-color: $t-status-color--error;color: $t-status-color--error;} - .t-dropdown__details {color: $t-status-color--error;} + .t-dropdown__control {border-color: $t-status-color-error;color: $t-status-color-error;} + .t-dropdown__details {color: $t-status-color-error;} } &.t-dropdown--success { - .t-dropdown__control {border-color: $t-status-color--success; color: $t-status-color--success;} - .t-dropdown__details {color: $t-status-color--success;} + .t-dropdown__control {border-color: $t-status-color-success; color: $t-status-color-success;} + .t-dropdown__details {color: $t-status-color-success;} } &.t-dropdown--underline .t-dropdown__control { diff --git a/src/styles/component/input/number-field/TNumberField.scss b/src/styles/component/input/number-field/TNumberField.scss index ee729a39..47839c20 100644 --- a/src/styles/component/input/number-field/TNumberField.scss +++ b/src/styles/component/input/number-field/TNumberField.scss @@ -140,12 +140,12 @@ @include animation-shake(); - .t-number-field__container {border-color: $t-status-color--error;} - .t-number-field__details {color: $t-status-color--error;} + .t-number-field__container {border-color: $t-status-color-error;} + .t-number-field__details {color: $t-status-color-error;} } &.t-number-field--success { - .t-number-field__container {border-color: $t-status-color--success;} - .t-number-field__details {color: $t-status-color--success;} + .t-number-field__container {border-color: $t-status-color-success;} + .t-number-field__details {color: $t-status-color-success;} } } diff --git a/src/styles/component/input/radio-group/TRadioGroup.scss b/src/styles/component/input/radio-group/TRadioGroup.scss index b9c140b3..1c44ccdf 100644 --- a/src/styles/component/input/radio-group/TRadioGroup.scss +++ b/src/styles/component/input/radio-group/TRadioGroup.scss @@ -23,10 +23,10 @@ &.t-radio-group--failure { @include animation-shake(); - .t-radio-group__message {color: $t-status-color--error;} + .t-radio-group__message {color: $t-status-color-error;} } &.t-radio-group--success { - .t-radio-group__message {color: $t-status-color--success;} + .t-radio-group__message {color: $t-status-color-success;} } } diff --git a/src/styles/component/input/radio/TRadio.scss b/src/styles/component/input/radio/TRadio.scss index 9c85caac..87d95b6c 100644 --- a/src/styles/component/input/radio/TRadio.scss +++ b/src/styles/component/input/radio/TRadio.scss @@ -1,5 +1,4 @@ .t-radio { - line-height: $t-line-height-header; .t-radio__container { display: flex; @@ -9,7 +8,7 @@ outline: none; .t-radio__icon { border-radius: 2px; } - .t-radio__label { @include typo-body-3; } + .t-radio__label { @include typo-body-3; color: $t-black-color; } &:is(:focus-within, :hover) .t-radio__icon.t-radio__icon--deselected svg { fill: $t-white-color; stroke: $t-primary-color; } } diff --git a/src/styles/component/input/switch/TSwitch.scss b/src/styles/component/input/switch/TSwitch.scss index 828ad070..ea0091f6 100644 --- a/src/styles/component/input/switch/TSwitch.scss +++ b/src/styles/component/input/switch/TSwitch.scss @@ -1,5 +1,4 @@ .t-switch { - line-height: $t-line-height-header; display: flex; align-items: center; diff --git a/src/styles/component/input/text-area/TTextArea.scss b/src/styles/component/input/text-area/TTextArea.scss index f449fce3..034c4e32 100644 --- a/src/styles/component/input/text-area/TTextArea.scss +++ b/src/styles/component/input/text-area/TTextArea.scss @@ -2,7 +2,6 @@ position: relative; display: inline-block; width: 100%; - line-height: $t-line-height-default; .t-text-area__label { @@ -100,12 +99,12 @@ @include animation-shake(); - .t-text-area__container {border-color: $t-status-color--error;} - .t-text-area__details {color: $t-status-color--error;} + .t-text-area__container {border-color: $t-status-color-error;} + .t-text-area__details {color: $t-status-color-error;} } &.t-text-area--success { - .t-text-area__container {border-color: $t-status-color--success;} - .t-text-area__details {color: $t-status-color--success;} + .t-text-area__container {border-color: $t-status-color-success;} + .t-text-area__details {color: $t-status-color-success;} } } diff --git a/src/styles/component/input/text-array-field/TTextArrayField.scss b/src/styles/component/input/text-array-field/TTextArrayField.scss index 21b8ab71..8b7d1846 100644 --- a/src/styles/component/input/text-array-field/TTextArrayField.scss +++ b/src/styles/component/input/text-array-field/TTextArrayField.scss @@ -34,10 +34,10 @@ &.t-text-array-field--failure { @include animation-shake(); - border-color: $t-status-color--error; + border-color: $t-status-color-error; .t-text-array-field__message { - color: $t-status-color--error; + color: $t-status-color-error; } } diff --git a/src/styles/component/input/text-field/TTextField.scss b/src/styles/component/input/text-field/TTextField.scss index a70bbb7a..747746e0 100644 --- a/src/styles/component/input/text-field/TTextField.scss +++ b/src/styles/component/input/text-field/TTextField.scss @@ -158,17 +158,17 @@ @include animation-shake(); .t-text-field__container { - border-color: $t-status-color--error; - .t-text-field__container__counter__counted {color: $t-status-color--error;} + border-color: $t-status-color-error; + .t-text-field__container__counter__counted {color: $t-status-color-error;} } - .t-text-field__details {color: $t-status-color--error;} + .t-text-field__details {color: $t-status-color-error;} } &.t-text-field--success { .t-text-field__container { - border-color: $t-status-color--success !important; - .t-text-field__container__counter__counted {color: $t-status-color--success;} + border-color: $t-status-color-success !important; + .t-text-field__container__counter__counted {color: $t-status-color-success;} } - .t-text-field__details {color: $t-status-color--success;} + .t-text-field__details {color: $t-status-color-success;} } } diff --git a/src/styles/component/screen/page/TPage.scss b/src/styles/component/screen/page/TPage.scss index 6d8ee0f8..a59162b9 100644 --- a/src/styles/component/screen/page/TPage.scss +++ b/src/styles/component/screen/page/TPage.scss @@ -48,7 +48,7 @@ width: 100%; height: 100%; padding: $t-spacing-56 $t-spacing-24 0 $t-spacing-24; - border-left: 1px solid $t-grid-border-color--01; + border-left: 1px solid $t-blue-gray-color-2; position: absolute; transition: width 0.3s, right 0.3s; right: 0; @@ -118,7 +118,6 @@ .t-page__information-area__content { position: absolute; - line-height: $t-line-height-body; width: calc(100% - $t-spacing-24 * 2); white-space: pre-line; overflow-y: auto; diff --git a/src/styles/design-variables/ThemeVariables.scss b/src/styles/design-variables/ThemeVariables.scss index 528f0297..a7de22ec 100644 --- a/src/styles/design-variables/ThemeVariables.scss +++ b/src/styles/design-variables/ThemeVariables.scss @@ -37,6 +37,7 @@ // endregion + // region [Color] --t-primary-color: #3617CE; @@ -75,35 +76,26 @@ // endregion - - // region [Shadow] --t-shadow-box: 0px 0px 8px 0px #D9DFFC; --t-shadow-focused-element: 4px 4px 13px 0px rgba(88, 103, 147, 0.13), 18px 16px 24px 0px rgba(88, 103, 147, 0.15); --t-shadow-modal: 4px 5px 15px 0px rgba(0, 0, 0, 0.15), 18px 21px 28px 0px rgba(0, 0, 0, 0.13), 71px 85px 44px 0px rgba(0, 0, 0, 0.02); + // endregion + //////////////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////// Deprecated //////////////////////////////////// //////////////////////////////////////////////////////////////////////////////////////// - - --t-point-color: #121821; - - --t-status-color--required: #FF0000; - --t-status-color--success: #068469; - --t-status-color--error: #D53A2A; - --t-status-color--default: #959595; - --t-status-color--processing: #4874FF; - --t-status-color--warning: #F7A443; - - + --t-status-color-required: #FF0000; + --t-status-color-success: #068469; + --t-status-color-error: #D53A2A; // z-index --t-z-index-tooltip: 900; --t-z-index-modal: 500; --t-z-index-dropdown: 300; --t-z-index-drop-holder: 300; - --t-z-index-page-title: 1; } diff --git a/src/styles/designToken/Mixin.scss b/src/styles/designToken/Mixin.scss index b8b07bbc..37df1505 100644 --- a/src/styles/designToken/Mixin.scss +++ b/src/styles/designToken/Mixin.scss @@ -22,7 +22,7 @@ color: $color; } -@mixin require-mark { content: ' *'; color: $t-status-color--required; font-weight: $t-font-weight-bold; } +@mixin require-mark { content: ' *'; color: $t-status-color-required; font-weight: $t-font-weight-bold; } @mixin typo-h1 {font-size: $t-font-size-h1; line-height: $t-line-height-h1; font-weight: $t-font-weight-h1; } @mixin typo-h2 {font-size: $t-font-size-h2; line-height: $t-line-height-h2; font-weight: $t-font-weight-h2; } diff --git a/src/styles/designToken/ThemeToken.module.scss b/src/styles/designToken/ThemeToken.module.scss index 1b5921d1..a2d3bdfc 100644 --- a/src/styles/designToken/ThemeToken.module.scss +++ b/src/styles/designToken/ThemeToken.module.scss @@ -2,29 +2,6 @@ :export { tPrimaryColor: $t-primary-color; - tPointColor: $t-point-color; - - tPrimaryColorShade1: $t-primary-color--shade-1; - tPrimaryColorShade2: $t-primary-color--shade-2; - tPrimaryColorShade3: $t-primary-color--shade-3; - tPrimaryColorShade4: $t-primary-color--shade-4; - tPrimaryColorShade5: $t-primary-color--shade-5; - tPrimaryColorShade6: $t-primary-color--shade-6; - tPrimaryColorShade7: $t-primary-color--shade-7; - tPrimaryColorShade8: $t-primary-color--shade-8; - tPrimaryColorShade9: $t-primary-color--shade-9; - - tPrimaryColorTint1: $t-primary-color--tint-1; - tPrimaryColorTint2: $t-primary-color--tint-2; - tPrimaryColorTint3: $t-primary-color--tint-3; - tPrimaryColorTint4: $t-primary-color--tint-4; - tPrimaryColorTint5: $t-primary-color--tint-5; - tPrimaryColorTint6: $t-primary-color--tint-6; - tPrimaryColorTint7: $t-primary-color--tint-7; - tPrimaryColorTint8: $t-primary-color--tint-8; - tPrimaryColorTint9: $t-primary-color--tint-9; - tPrimaryColorTint10: $t-primary-color--tint-10; - tPrimaryColorTint11: $t-primary-color--tint-11; tWhiteColor: $t-white-color; tGrayColor1: $t-gray-color-1; @@ -52,9 +29,8 @@ tSecondaryPinkColor1: $t-secondary-color-pink-1; tSecondaryPinkColor2: $t-secondary-color-pink-2; - tStatusColorSuccess: $t-status-color--success; - tStatusColorError: $t-status-color--error; - tStatusColorWarning: $t-status-color--warning; + tStatusColorSuccess: $t-status-color-success; + tStatusColorError: $t-status-color-error; tSpacing2: $t-spacing-2; tSpacing4: $t-spacing-4; diff --git a/src/styles/designToken/ThemeToken.scss b/src/styles/designToken/ThemeToken.scss index edf6463d..90e9e6ca 100644 --- a/src/styles/designToken/ThemeToken.scss +++ b/src/styles/designToken/ThemeToken.scss @@ -11,10 +11,13 @@ $t-secondary-color-purple-1: var(--t-secondary-color-purple-1) !default; $t-secondary-color-purple-2: var(--t-secondary-color-purple-2) !default; $t-secondary-color-purple-3: var(--t-secondary-color-purple-3) !default; $t-secondary-color-purple-4: var(--t-secondary-color-purple-4) !default; -$t-secondary-color-blue-gray: var(--t-secondary-color-blue-gray) !default; $t-secondary-color-pink-1: var(--t-secondary-color-pink-1) !default; $t-secondary-color-pink-2: var(--t-secondary-color-pink-2) !default; +$t-status-color-required: var(--t-status-color-required) !default; +$t-status-color-success: var(--t-status-color-success) !default; +$t-status-color-error: var(--t-status-color-error) !default; + $t-white-color: var(--t-white-color) !default; // #FFFFFF $t-gray-color-1: var(--t-gray-color--1) !default; // #F7F7F7 @@ -32,12 +35,6 @@ $t-blue-gray-color-5: var(--blue-gray-color-5) !default; // #2B394E $t-black-color: var(--t-black-color) !default; // #121821 - - -$t-background-color--hover: $t-blue-gray-color-2; -$t-background-color--read-only: $t-gray-color-1; - - // endregion @@ -137,6 +134,7 @@ $t-spacing-48: 48px; $t-spacing-56: 56px; $t-spacing-64: 64px; $t-spacing-72: 72px; +$t-spacing-80: 80px; // endregion @@ -150,109 +148,22 @@ $t-shadow--modal: var(--t-shadow-modal); // endregion -//////////////////////////////////////////////////////////////////////////////////////////////// -////////////////////////////////////// Deprecated //////////////////////////////////////////// -//////////////////////////////////////////////////////////////////////////////////////////////// - - - - -// content - -// remove -$t-line-height-default: var(--t-line-height-default); -$t-line-height-header: var(--t-line-height-header); -$t-line-height-body: var(--t-line-height-body); - - -$t-point-color: var(--t-point-color) !default; - -$t-primary-color--shade-1: color-mix(in srgb, var(--t-primary-color), black 10%) !default; -$t-primary-color--shade-2: color-mix(in srgb, var(--t-primary-color), black 20%) !default; -$t-primary-color--shade-3: color-mix(in srgb, var(--t-primary-color), black 30%) !default; -$t-primary-color--shade-4: color-mix(in srgb, var(--t-primary-color), black 40%) !default; -$t-primary-color--shade-5: color-mix(in srgb, var(--t-primary-color), black 50%) !default; -$t-primary-color--shade-6: color-mix(in srgb, var(--t-primary-color), black 60%) !default; -$t-primary-color--shade-7: color-mix(in srgb, var(--t-primary-color), black 70%) !default; -$t-primary-color--shade-8: color-mix(in srgb, var(--t-primary-color), black 80%) !default; -$t-primary-color--shade-9: color-mix(in srgb, var(--t-primary-color), black 90%) !default; - -$t-primary-color--tint-1: color-mix(in srgb, var(--t-primary-color), white 10%) !default; -$t-primary-color--tint-2: color-mix(in srgb, var(--t-primary-color), white 20%) !default; -$t-primary-color--tint-3: color-mix(in srgb, var(--t-primary-color), white 30%) !default; -$t-primary-color--tint-4: color-mix(in srgb, var(--t-primary-color), white 40%) !default; -$t-primary-color--tint-5: color-mix(in srgb, var(--t-primary-color), white 50%) !default; -$t-primary-color--tint-6: color-mix(in srgb, var(--t-primary-color), white 60%) !default; -$t-primary-color--tint-7: color-mix(in srgb, var(--t-primary-color), white 70%) !default; -$t-primary-color--tint-8: color-mix(in srgb, var(--t-primary-color), white 80%) !default; -$t-primary-color--tint-9: color-mix(in srgb, var(--t-primary-color), white 90%) !default; -$t-primary-color--tint-10: color-mix(in srgb, var(--t-primary-color), white 95%) !default; -$t-primary-color--tint-11: color-mix(in srgb, var(--t-primary-color), white 98%) !default; - - -$t-status-color--required: var(--t-status-color--required) !default; -$t-status-color--success: var(--t-status-color--success) !default; -$t-status-color--error: var(--t-status-color--error) !default; -$t-status-color--default: var(--t-status-color--default) !default; -$t-status-color--processing: var(--t-status-color--processing) !default; -$t-status-color--warning: var(--t-status-color--warning) !default; +// region [Z-Index] +$t-z-index-tooltip: var(--t-z-index-tooltip); +$t-z-index-modal: var(--t-z-index-modal); +$t-z-index-dropdown: var(--t-z-index-dropdown); +$t-z-index-drop-holder: var(--t-z-index-drop-holder); +// endregion -// font color -$t-font-color--primary-01: $t-primary-color !default; // #333333 -$t-font-color--primary-02: $t-primary-color--tint-6 !default; // #333333 -$t-font-color--primary-03: $t-gray-color-5 !default; // #333333 +//////////////////////////////////////// +/////////// Status tokens ////////////// +//////////////////////////////////////// $t-font-color--selected: $t-primary-color; $t-font-color--placeholder: $t-gray-color-4; $t-font-color--read-only: $t-black-color; $t-font-color--disabled: $t-gray-color-4; -$t-font-color--default: $t-gray-color-6; -$t-font-color--label: $t-gray-color-3; - - -$t-font-weight--selected: var(--t-font-weight-medium); -$t-border-color--default: $t-gray-color-3; - -// background color -$t-background-color-01: $t-primary-color--tint-9; -$t-background-color-02: $t-primary-color--tint-10; -$t-background-color-03: $t-primary-color--tint-11; - -// chart color -$t-chart-color-01: $t-primary-color--shade-1; -$t-chart-color-02: $t-primary-color--shade-2; -$t-chart-color-03: $t-primary-color--shade-3; -$t-chart-color-04: $t-primary-color--shade-4; -$t-chart-color-05: $t-primary-color--shade-5; -$t-chart-color-06: color-mix(in srgb, var(--t-point-color), black 20%); -$t-chart-color-07: color-mix(in srgb, var(--t-point-color), black 20%); -$t-chart-color-08: color-mix(in srgb, var(--t-point-color), black 20%); -$t-chart-color-09: color-mix(in srgb, var(--t-point-color), black 20%); -$t-chart-color-10: color-mix(in srgb, var(--t-point-color), black 20%); - -// grid color -$t-grid-border-color--01: #DDDDDD; -$t-grid-border-color--02: $t-blue-gray-color-2; -$t-grid-border-color--03: $t-black-color; -$t-grid-background-color--01: $t-gray-color-2; - -$t-input-border-color--01: #CCCCCC; - - -// endregion - -// region [Z-Index] - -// frame -$t-z-index-header: 100; - -$t-z-index-tooltip: var(--t-z-index-tooltip); -$t-z-index-modal: var(--t-z-index-modal); -$t-z-index-dropdown: var(--t-z-index-dropdown); -$t-z-index-drop-holder: var(--t-z-index-drop-holder); - -// endregion diff --git a/src/styles/init/Common.scss b/src/styles/init/Common.scss index 851b98a8..0bdb2dd6 100644 --- a/src/styles/init/Common.scss +++ b/src/styles/init/Common.scss @@ -1,7 +1,7 @@ *::selection { - background: $t-point-color; - color: $t-white-color; + background: $t-gray-color-2; + color: $t-black-color; } .clickable { diff --git a/stories/components/input/switch/TSwitch.stories.tsx b/stories/components/input/switch/TSwitch.stories.tsx index ceb424bb..669b14df 100644 --- a/stories/components/input/switch/TSwitch.stories.tsx +++ b/stories/components/input/switch/TSwitch.stories.tsx @@ -23,7 +23,7 @@ const NormalTemplate = (args: TSwitchProps) => { const switch3 = useInputState(true); const switch4 = useInputState(false); - return (
+ return (