From 3a90fbb68a8ba86386d7bf775c65965411ce09f5 Mon Sep 17 00:00:00 2001 From: Dima Vyshniakov Date: Sun, 30 Jun 2024 20:42:40 +0200 Subject: [PATCH] fix(css): rename global CSS variable prefix to reflect new library name fix #340 --- src/internal/Actions/ActionButton.module.css | 34 +-- src/internal/Actions/Actions.module.css | 20 +- src/internal/Icons/Icon.module.css | 10 +- .../Transitions/Transitions.module.css | 24 +- src/internal/utils/convertThemeVarName.ts | 2 +- src/lib/Breadcrumbs/Breadcrumbs.module.css | 44 +-- src/lib/Button/Button.module.css | 128 ++++----- src/lib/ButtonGroup/ButtonGroup.module.css | 8 +- src/lib/Card/Card.module.css | 12 +- src/lib/Carousel/Carousel.module.css | 28 +- src/lib/CounterDemo/Counter.module.css | 2 +- src/lib/Dialog/Dialog.module.css | 26 +- src/lib/Drawer/Drawer.module.css | 14 +- src/lib/Figure/Figure.module.css | 16 +- src/lib/Form/Form.module.css | 2 +- src/lib/FormField/FormField.module.css | 20 +- .../InputCheckbox/InputCheckbox.module.css | 46 +-- src/lib/InputColor/InputColor.module.css | 54 ++-- src/lib/InputDate/InputDate.module.css | 50 ++-- src/lib/InputFile/InputFile.module.css | 42 +-- src/lib/InputGroup/InputGroup.module.css | 18 +- src/lib/InputNumber/InputNumber.module.css | 62 ++-- .../InputPassword/InputPassword.module.css | 52 ++-- src/lib/InputRadio/InputRadio.module.css | 36 +-- src/lib/InputRange/InputRange.module.css | 68 ++--- src/lib/InputText/InputText.module.css | 54 ++-- src/lib/InputTime/InputTime.module.css | 58 ++-- src/lib/Layout/demoComponents/Cell.module.css | 6 +- .../demoComponents/ContainerFill.module.css | 24 +- .../demoComponents/ElementFill.module.css | 12 +- .../demoComponents/LongContent.module.css | 6 +- src/lib/Menu/Menu.module.css | 12 +- src/lib/Navigation/Navigation.module.css | 44 +-- src/lib/Pagination/Pagination.module.css | 56 ++-- src/lib/Picture/Picture.module.css | 2 +- src/lib/Progress/Progress.module.css | 14 +- src/lib/Provider/Provider.module.css | 2 +- src/lib/Select/Select.module.css | 74 ++--- src/lib/Skeleton/Skeleton.module.css | 14 +- src/lib/Tabs/Tabs.module.css | 30 +- src/lib/Text/Text.module.css | 264 +++++++++--------- src/lib/Textarea/Textarea.module.css | 60 ++-- src/lib/Theme/PublicThemeType.ts | 66 ++--- src/lib/Theme/theme.ts | 8 +- src/lib/Toast/Toast.module.css | 54 ++-- src/lib/Tooltip/Tooltip.module.css | 24 +- 46 files changed, 851 insertions(+), 851 deletions(-) diff --git a/src/internal/Actions/ActionButton.module.css b/src/internal/Actions/ActionButton.module.css index 4b4bdd35..3df167e3 100644 --- a/src/internal/Actions/ActionButton.module.css +++ b/src/internal/Actions/ActionButton.module.css @@ -11,40 +11,40 @@ } .action-button { - --icon-size: calc(var(--fg-size-unit) * 4); + --icon-size: calc(var(--kg-size-unit) * 4); --icon-shadow: none; align-items: center; - border-top: 1px solid var(--fg-background-100); + border-top: 1px solid var(--kg-background-100); box-sizing: border-box; cursor: pointer; display: flex; flex-direction: row; flex-grow: 1; flex-shrink: 1; - font-weight: var(--fg-font-weight-bolder); + font-weight: var(--kg-font-weight-bolder); justify-content: center; overflow: hidden; - padding: calc(var(--fg-size-unit) * 2); + padding: calc(var(--kg-size-unit) * 2); text-overflow: ellipsis; transition: - background-color var(--fg-time-sm) ease-in-out, - color var(--fg-time-sm) ease-in-out; + background-color var(--kg-time-sm) ease-in-out, + color var(--kg-time-sm) ease-in-out; user-select: none; white-space: nowrap; &:hover { - background: var(--fg-color-do); - color: var(--fg-background-000); + background: var(--kg-color-do); + color: var(--kg-background-000); } &:focus-visible:not(:hover) { - color: var(--fg-color-do); + color: var(--kg-color-do); } &:active { - background: var(--fg-color-do); - color: var(--fg-background-000); + background: var(--kg-color-do); + color: var(--kg-background-000); & .action-label, & .action-icon { @@ -56,7 +56,7 @@ @media (--viewport-md) { &:not(:only-child, :last-child) { - border-right: 1px solid var(--fg-background-100); + border-right: 1px solid var(--kg-background-100); } &:not(:only-child) { @@ -66,25 +66,25 @@ } .default { - color: var(--fg-color-sol); + color: var(--kg-color-sol); } .link { - color: var(--fg-color-action); + color: var(--kg-color-action); } .success { - color: var(--fg-color-success); + color: var(--kg-color-success); } .danger { - color: var(--fg-color-error); + color: var(--kg-color-error); } .action-icon { filter: var(--icon-shadow); flex-shrink: 0; - margin-right: var(--fg-size-unit); + margin-right: var(--kg-size-unit); width: var(--icon-size); } diff --git a/src/internal/Actions/Actions.module.css b/src/internal/Actions/Actions.module.css index 0e4bc7b9..c9b6f3be 100644 --- a/src/internal/Actions/Actions.module.css +++ b/src/internal/Actions/Actions.module.css @@ -9,30 +9,30 @@ & .primary-action, & .inverted-action { &:not(:only-child, :last-child) { - border-right: var(--fg-border-width-100) solid var(--fg-background-100); + border-right: var(--kg-border-width-100) solid var(--kg-background-100); } } } } .primary-action { - --icon-size: calc(var(--fg-size-unit) * 3); + --icon-size: calc(var(--kg-size-unit) * 3); - color: var(--fg-color-sol); - font-size: var(--fg-font-size-small); + color: var(--kg-color-sol); + font-size: var(--kg-font-size-small); justify-content: start; } .inverted-action { - --icon-shadow: drop-shadow(var(--fg-text-shadow)); - --icon-size: calc(var(--fg-size-unit) * 3); + --icon-shadow: drop-shadow(var(--kg-text-shadow)); + --icon-size: calc(var(--kg-size-unit) * 3); - color: var(--fg-background-000); - font-size: var(--fg-font-size-small); + color: var(--kg-background-000); + font-size: var(--kg-font-size-small); justify-content: start; - text-shadow: var(--fg-text-shadow); + text-shadow: var(--kg-text-shadow); &:hover { - background: var(--fg-color-re); + background: var(--kg-color-re); } } diff --git a/src/internal/Icons/Icon.module.css b/src/internal/Icons/Icon.module.css index e6efc273..659bb14a 100644 --- a/src/internal/Icons/Icon.module.css +++ b/src/internal/Icons/Icon.module.css @@ -1,8 +1,8 @@ .icon { display: block; fill: currentcolor; - height: calc(var(--fg-size-unit) * 4); - width: calc(var(--fg-size-unit) * 4); + height: calc(var(--kg-size-unit) * 4); + width: calc(var(--kg-size-unit) * 4); } @keyframes spin { @@ -16,13 +16,13 @@ } .error { - color: var(--fg-color-error); + color: var(--kg-color-error); } .valid { - color: var(--fg-color-success); + color: var(--kg-color-success); } .loading { - color: var(--fg-color-action); + color: var(--kg-color-action); } diff --git a/src/internal/Transitions/Transitions.module.css b/src/internal/Transitions/Transitions.module.css index 132fc5a0..a039d4a6 100644 --- a/src/internal/Transitions/Transitions.module.css +++ b/src/internal/Transitions/Transitions.module.css @@ -55,19 +55,19 @@ } .slide-top-enter { - animation: slide-top var(--fg-time-sm) ease-out both; + animation: slide-top var(--kg-time-sm) ease-out both; &::backdrop { - animation: backdrop-fade var(--fg-time-sm) ease-in both; + animation: backdrop-fade var(--kg-time-sm) ease-in both; } } .slide-top-exit { - animation: slide-top var(--fg-time-sm) ease-out both; + animation: slide-top var(--kg-time-sm) ease-out both; animation-direction: reverse; &::backdrop { - animation: backdrop-fade var(--fg-time-sm) ease-in both; + animation: backdrop-fade var(--kg-time-sm) ease-in both; animation-direction: reverse; } } @@ -94,13 +94,13 @@ .backdrop-fade-enter { &::backdrop { - animation: backdrop-fade var(--fg-time-sm) ease-in both; + animation: backdrop-fade var(--kg-time-sm) ease-in both; } } .backdrop-fade-exit { &::backdrop { - animation: backdrop-fade var(--fg-time-sm) ease-in both; + animation: backdrop-fade var(--kg-time-sm) ease-in both; animation-direction: reverse; } } @@ -136,11 +136,11 @@ } .slide-bottom-enter { - animation: slide-in-bottom var(--fg-time-sm) cubic-bezier(0.25, 0.46, 0.45, 0.94) both; + animation: slide-in-bottom var(--kg-time-sm) cubic-bezier(0.25, 0.46, 0.45, 0.94) both; } .slide-bottom-exit { - animation: slide-out-bottom var(--fg-time-sm) cubic-bezier(0.55, 0.085, 0.68, 0.53) both; + animation: slide-out-bottom var(--kg-time-sm) cubic-bezier(0.55, 0.085, 0.68, 0.53) both; } .slide-bottom-enter-done { @@ -179,7 +179,7 @@ } .slide-left-enter { - animation: slide-in-left var(--fg-time-sm) ease-out both; + animation: slide-in-left var(--kg-time-sm) ease-out both; transform: translate(-100%, 0); } @@ -188,7 +188,7 @@ } .slide-left-exit { - animation: slide-out-left var(--fg-time-sm) ease-out both; + animation: slide-out-left var(--kg-time-sm) ease-out both; } .slide-left-exit-done { @@ -222,7 +222,7 @@ } .slide-right-enter { - animation: slide-in-right var(--fg-time-sm) ease-out both; + animation: slide-in-right var(--kg-time-sm) ease-out both; transform: translate(100%, 0); } @@ -231,7 +231,7 @@ } .slide-right-exit { - animation: slide-out-right var(--fg-time-sm) ease-out both; + animation: slide-out-right var(--kg-time-sm) ease-out both; } .slide-right-exit-done { diff --git a/src/internal/utils/convertThemeVarName.ts b/src/internal/utils/convertThemeVarName.ts index 249e61ed..0d5a39af 100644 --- a/src/internal/utils/convertThemeVarName.ts +++ b/src/internal/utils/convertThemeVarName.ts @@ -1,7 +1,7 @@ import type {ThemeType} from '@/lib'; export const convertThemeVarName = (str: string) => - `fg-${str + `kg-${str // camelToKebabCase .replace(/(? `-${letter.toLowerCase()}`) // split numbers diff --git a/src/lib/Breadcrumbs/Breadcrumbs.module.css b/src/lib/Breadcrumbs/Breadcrumbs.module.css index adc67330..9e40450a 100644 --- a/src/lib/Breadcrumbs/Breadcrumbs.module.css +++ b/src/lib/Breadcrumbs/Breadcrumbs.module.css @@ -1,51 +1,51 @@ .breadcrumbs { align-items: baseline; - background: var(--fg-color-mi); - border-radius: var(--fg-border-radius-300); + background: var(--kg-color-mi); + border-radius: var(--kg-border-radius-300); display: flex; flex-direction: row; max-width: 100%; overflow: auto; - padding: calc(var(--fg-size-unit) * 3); + padding: calc(var(--kg-size-unit) * 3); } .crumb { align-items: baseline; display: flex; flex-direction: row; - font-size: var(--fg-font-size-large); - font-weight: var(--fg-font-weight-bolder); - gap: var(--fg-size-unit); + font-size: var(--kg-font-size-large); + font-weight: var(--kg-font-weight-bolder); + gap: var(--kg-size-unit); letter-spacing: 0.33px; &:not(:last-child) { - color: var(--fg-color-action); + color: var(--kg-color-action); & .text { - border-bottom: 2px solid var(--fg-color-action); + border-bottom: 2px solid var(--kg-color-action); } &:hover { & .text { - border-bottom-color: var(--fg-color-re); - color: var(--fg-color-re); + border-bottom-color: var(--kg-color-re); + color: var(--kg-color-re); } & .icon { - color: var(--fg-color-re); + color: var(--kg-color-re); } } &::after { - color: var(--fg-background-200); + color: var(--kg-background-200); content: "/"; - font-weight: var(--fg-font-weight-normal); - padding: 0 calc(var(--fg-size-unit) * 2); + font-weight: var(--kg-font-weight-normal); + padding: 0 calc(var(--kg-size-unit) * 2); } } &:last-child { - color: var(--fg-color-re); + color: var(--kg-color-re); cursor: default; pointer-events: none; } @@ -64,19 +64,19 @@ .icon { align-self: center; - height: calc(var(--fg-size-unit) * 3); - width: calc(var(--fg-size-unit) * 3); + height: calc(var(--kg-size-unit) * 3); + width: calc(var(--kg-size-unit) * 3); } .ellipsis { cursor: default; - font-size: var(--fg-font-size-large); - font-weight: var(--fg-font-weight-bolder); + font-size: var(--kg-font-size-large); + font-weight: var(--kg-font-weight-bolder); &::after { - color: var(--fg-background-200); + color: var(--kg-background-200); content: "/"; - font-weight: var(--fg-font-weight-normal); - padding: 0 calc(var(--fg-size-unit) * 2); + font-weight: var(--kg-font-weight-normal); + padding: 0 calc(var(--kg-size-unit) * 2); } } diff --git a/src/lib/Button/Button.module.css b/src/lib/Button/Button.module.css index fec298fc..5b3ed67b 100644 --- a/src/lib/Button/Button.module.css +++ b/src/lib/Button/Button.module.css @@ -1,26 +1,26 @@ .button { - --icon-shadow: drop-shadow(var(--fg-text-shadow)); + --icon-shadow: drop-shadow(var(--kg-text-shadow)); align-items: center; background-color: var(--bg-color); - border: var(--fg-border-width-300) solid var(--border-color); - border-radius: var(--fg-border-radius-300); + border: var(--kg-border-width-300) solid var(--border-color); + border-radius: var(--kg-border-radius-300); color: var(--text-color); cursor: pointer; display: inline-flex; flex-direction: row; font-size: var(--font-size); - font-weight: var(--fg-font-weight-bolder); - gap: calc(var(--fg-size-unit) * var(--size-scale-factor) / 2); + font-weight: var(--kg-font-weight-bolder); + gap: calc(var(--kg-size-unit) * var(--size-scale-factor) / 2); letter-spacing: 1px; line-height: 1.2; - padding: calc(var(--fg-size-unit) * var(--size-scale-factor)) - calc(var(--fg-size-unit) * 3 * var(--size-scale-factor)); - text-shadow: var(--fg-text-shadow); + padding: calc(var(--kg-size-unit) * var(--size-scale-factor)) + calc(var(--kg-size-unit) * 3 * var(--size-scale-factor)); + text-shadow: var(--kg-text-shadow); transition: - background-color var(--fg-time-sm) ease-in-out, - border-color var(--fg-time-sm) ease-in-out, - text-shadow var(--fg-time-sm) ease-in-out; + background-color var(--kg-time-sm) ease-in-out, + border-color var(--kg-time-sm) ease-in-out, + text-shadow var(--kg-time-sm) ease-in-out; user-select: none; &:hover { @@ -43,7 +43,7 @@ } &:focus-visible:not(:disabled) { - border-color: var(--fg-color-re); + border-color: var(--kg-color-re); } } @@ -58,34 +58,34 @@ /* Variants */ .primary { - --border-color: var(--fg-color-do); - --bg-color: var(--fg-color-do); - --text-color: var(--fg-background-000); + --border-color: var(--kg-color-do); + --bg-color: var(--kg-color-do); + --text-color: var(--kg-background-000); - text-shadow: var(--fg-text-shadow); + text-shadow: var(--kg-text-shadow); &:hover { - --border-color: var(--fg-color-re); - --bg-color: var(--fg-color-re); - --text-color: var(--fg-background-000); + --border-color: var(--kg-color-re); + --bg-color: var(--kg-color-re); + --text-color: var(--kg-background-000); } &:disabled { - --border-color: var(--fg-background-100); - --bg-color: var(--fg-background-000); - --text-color: var(--fg-background-300); + --border-color: var(--kg-background-100); + --bg-color: var(--kg-background-000); + --text-color: var(--kg-background-300); } } .success { - --border-color: var(--fg-color-success); - --bg-color: var(--fg-color-success); - --text-color: var(--fg-background-000); + --border-color: var(--kg-color-success); + --bg-color: var(--kg-color-success); + --text-color: var(--kg-background-000); &:hover { - --border-color: var(--fg-color-success); + --border-color: var(--kg-color-success); --bg-color: transparent; - --text-color: var(--fg-color-success); + --text-color: var(--kg-color-success); & .icon { filter: none; @@ -93,21 +93,21 @@ } &:disabled { - --border-color: var(--fg-background-100); - --bg-color: var(--fg-background-000); - --text-color: var(--fg-background-300); + --border-color: var(--kg-background-100); + --bg-color: var(--kg-background-000); + --text-color: var(--kg-background-300); } } .danger { - --border-color: var(--fg-color-error); - --bg-color: var(--fg-color-error); - --text-color: var(--fg-background-000); + --border-color: var(--kg-color-error); + --bg-color: var(--kg-color-error); + --text-color: var(--kg-background-000); &:hover { - --border-color: var(--fg-color-error); + --border-color: var(--kg-color-error); --bg-color: transparent; - --text-color: var(--fg-color-error); + --text-color: var(--kg-color-error); & .icon { filter: none; @@ -115,21 +115,21 @@ } &:disabled { - --border-color: var(--fg-background-100); - --bg-color: var(--fg-background-000); - --text-color: var(--fg-background-300); + --border-color: var(--kg-background-100); + --bg-color: var(--kg-background-000); + --text-color: var(--kg-background-300); } } .action { - --border-color: var(--fg-color-action); - --bg-color: var(--fg-color-action); - --text-color: var(--fg-background-000); + --border-color: var(--kg-color-action); + --bg-color: var(--kg-color-action); + --text-color: var(--kg-background-000); &:hover { - --border-color: var(--fg-color-action); + --border-color: var(--kg-color-action); --bg-color: transparent; - --text-color: var(--fg-color-action); + --text-color: var(--kg-color-action); & .icon { filter: none; @@ -137,23 +137,23 @@ } &:disabled { - --border-color: var(--fg-background-100); - --bg-color: var(--fg-background-000); - --text-color: var(--fg-background-300); + --border-color: var(--kg-background-100); + --bg-color: var(--kg-background-000); + --text-color: var(--kg-background-300); } } .alternative { - --border-color: var(--fg-color-do); + --border-color: var(--kg-color-do); --bg-color: transparent; - --text-color: var(--fg-color-re); + --text-color: var(--kg-color-re); text-shadow: none; &:hover { - --border-color: var(--fg-color-re); - --bg-color: var(--fg-color-re); - --text-color: var(--fg-background-000); + --border-color: var(--kg-color-re); + --bg-color: var(--kg-color-re); + --text-color: var(--kg-background-000); & .icon { filter: none; @@ -161,9 +161,9 @@ } &:disabled { - --border-color: var(--fg-background-100); - --bg-color: var(--fg-background-000); - --text-color: var(--fg-background-300); + --border-color: var(--kg-background-100); + --bg-color: var(--kg-background-000); + --text-color: var(--kg-background-300); } & .icon { @@ -174,21 +174,21 @@ .link { --border-color: transparent; --bg-color: transparent; - --text-color: var(--fg-color-action); + --text-color: var(--kg-color-action); - border-bottom-color: var(--fg-color-action); - padding: calc(var(--fg-size-unit) * var(--size-scale-factor)) 0; + border-bottom-color: var(--kg-color-action); + padding: calc(var(--kg-size-unit) * var(--size-scale-factor)) 0; text-shadow: none; &:hover { - border-bottom-color: var(--fg-color-do); + border-bottom-color: var(--kg-color-do); } &:disabled { - --bg-color: var(--fg-background-000); - --text-color: var(--fg-background-300); + --bg-color: var(--kg-background-000); + --text-color: var(--kg-background-300); - border-bottom-color: var(--fg-background-100); + border-bottom-color: var(--kg-background-100); } & .icon { @@ -200,17 +200,17 @@ .small { --size-scale-factor: 1; - --font-size: var(--fg-font-size-small); + --font-size: var(--kg-font-size-small); } .medium { --size-scale-factor: 1.5; - --font-size: var(--fg-font-size-medium); + --font-size: var(--kg-font-size-medium); } .large { --size-scale-factor: 2; - --font-size: var(--fg-font-size-large); + --font-size: var(--kg-font-size-large); } .icon { diff --git a/src/lib/ButtonGroup/ButtonGroup.module.css b/src/lib/ButtonGroup/ButtonGroup.module.css index f8e2e437..f86d7be2 100644 --- a/src/lib/ButtonGroup/ButtonGroup.module.css +++ b/src/lib/ButtonGroup/ButtonGroup.module.css @@ -1,10 +1,10 @@ .button-group { - background: var(--fg-background-100); - border-radius: var(--fg-border-radius-200); + background: var(--kg-background-100); + border-radius: var(--kg-border-radius-200); display: inline-flex; - gap: calc(var(--fg-size-unit) * 2); + gap: calc(var(--kg-size-unit) * 2); max-width: 100%; - padding: calc(var(--fg-size-unit) * 2); + padding: calc(var(--kg-size-unit) * 2); width: auto; &.horizontal { diff --git a/src/lib/Card/Card.module.css b/src/lib/Card/Card.module.css index 0b7ff088..f8f103b7 100644 --- a/src/lib/Card/Card.module.css +++ b/src/lib/Card/Card.module.css @@ -1,8 +1,8 @@ @import url("@/lib/Layout/customMedia.css"); .card { - border: var(--fg-border-width-200) solid var(--fg-background-100); - border-radius: var(--fg-border-radius-300); + border: var(--kg-border-width-200) solid var(--kg-background-100); + border-radius: var(--kg-border-radius-300); display: flex; max-width: 100%; overflow: hidden; @@ -21,11 +21,11 @@ } .vertical .body { - padding: calc(var(--fg-size-unit) * 3) calc(var(--fg-size-unit) * 2); + padding: calc(var(--kg-size-unit) * 3) calc(var(--kg-size-unit) * 2); } .horizontal .body { - padding: calc(var(--fg-size-unit) * 2) calc(var(--fg-size-unit) * 3); + padding: calc(var(--kg-size-unit) * 2) calc(var(--kg-size-unit) * 3); } .vertical .header-image { @@ -57,7 +57,7 @@ } .horizontal .actions:not(:empty) { - border-left: var(--fg-border-width-200) solid var(--fg-background-100); + border-left: var(--kg-border-width-200) solid var(--kg-background-100); } .row { @@ -87,7 +87,7 @@ justify-content: center; &:not(:only-child, :last-child) { - border-right: var(--fg-border-width-100) solid var(--fg-background-100); + border-right: var(--kg-border-width-100) solid var(--kg-background-100); } &:not(:only-child) { diff --git a/src/lib/Carousel/Carousel.module.css b/src/lib/Carousel/Carousel.module.css index 9d01fa7b..42150991 100644 --- a/src/lib/Carousel/Carousel.module.css +++ b/src/lib/Carousel/Carousel.module.css @@ -7,7 +7,7 @@ } .carousel { - --transition-duration: var(--fg-time-md); + --transition-duration: var(--kg-time-md); --transition-timing-function: ease-out; display: flex; @@ -42,19 +42,19 @@ .navigation { align-items: center; bottom: 0; - color: var(--fg-color-sol); + color: var(--kg-color-sol); cursor: pointer; display: flex; flex-direction: column; justify-content: center; position: absolute; top: 0; - transition: background-color var(--fg-time-sm) ease-in-out; - width: calc(var(--fg-size-unit) * 6); + transition: background-color var(--kg-time-sm) ease-in-out; + width: calc(var(--kg-size-unit) * 6); z-index: 2; &:hover { - background: color-mix(in srgb, var(--fg-color-mi) 66%, transparent); + background: color-mix(in srgb, var(--kg-color-mi) 66%, transparent); } &.left { @@ -67,8 +67,8 @@ } .icon { - height: calc(var(--fg-size-unit) * 6); - width: calc(var(--fg-size-unit) * 6); + height: calc(var(--kg-size-unit) * 6); + width: calc(var(--kg-size-unit) * 6); } .dots { @@ -76,21 +76,21 @@ display: flex; flex-direction: row; flex-wrap: nowrap; - gap: calc(var(--fg-size-unit) * 1.5); - height: calc(var(--fg-size-unit) * 5); + gap: calc(var(--kg-size-unit) * 1.5); + height: calc(var(--kg-size-unit) * 5); justify-content: center; overflow: hidden; } .dot { - background: var(--fg-color-sol); - border-radius: var(--fg-border-radius-300); + background: var(--kg-color-sol); + border-radius: var(--kg-border-radius-300); flex-shrink: 0; - height: calc(var(--fg-size-unit) * 1.5); - width: calc(var(--fg-size-unit) * 1.5); + height: calc(var(--kg-size-unit) * 1.5); + width: calc(var(--kg-size-unit) * 1.5); &.active { - background: var(--fg-color-do); + background: var(--kg-color-do); } } diff --git a/src/lib/CounterDemo/Counter.module.css b/src/lib/CounterDemo/Counter.module.css index 664eca3b..397f9329 100644 --- a/src/lib/CounterDemo/Counter.module.css +++ b/src/lib/CounterDemo/Counter.module.css @@ -17,7 +17,7 @@ background: lightseagreen; border: none; border-radius: 5px; - color: var(--fg-background-000); + color: var(--kg-background-000); cursor: pointer; display: block; font-size: 16px; diff --git a/src/lib/Dialog/Dialog.module.css b/src/lib/Dialog/Dialog.module.css index 21e4a048..8574ee38 100644 --- a/src/lib/Dialog/Dialog.module.css +++ b/src/lib/Dialog/Dialog.module.css @@ -6,21 +6,21 @@ } .dialog { - --shadow-color: color-mix(in srgb, var(--fg-color-sol) 66%, transparent); + --shadow-color: color-mix(in srgb, var(--kg-color-sol) 66%, transparent); border: none; - border-radius: var(--fg-border-radius-300); - box-shadow: var(--fg-shadow-200); - max-height: calc(100vh - 2 * 12 * var(--fg-size-unit)); - max-width: calc(100% - var(--fg-size-unit) * 8); - min-height: calc(var(--fg-size-unit) * 42); + border-radius: var(--kg-border-radius-300); + box-shadow: var(--kg-shadow-200); + max-height: calc(100vh - 2 * 12 * var(--kg-size-unit)); + max-width: calc(100% - var(--kg-size-unit) * 8); + min-height: calc(var(--kg-size-unit) * 42); outline: none; padding: 0; position: relative; - width: calc(var(--fg-size-unit) * 77); + width: calc(var(--kg-size-unit) * 77); &::backdrop { - background: color-mix(in srgb, var(--fg-color-do) 33%, transparent); + background: color-mix(in srgb, var(--kg-color-do) 33%, transparent); } } @@ -32,22 +32,22 @@ } .header { - padding: calc(3 * var(--fg-size-unit)) calc(3 * var(--fg-size-unit)) - calc(2 * var(--fg-size-unit)); + padding: calc(3 * var(--kg-size-unit)) calc(3 * var(--kg-size-unit)) + calc(2 * var(--kg-size-unit)); } .body { flex-grow: 1; flex-shrink: 1; overflow: auto; - padding: 0 calc(3 * var(--fg-size-unit)); + padding: 0 calc(3 * var(--kg-size-unit)); &:first-child { - padding-top: calc(3 * var(--fg-size-unit)); + padding-top: calc(3 * var(--kg-size-unit)); } &:not(:last-child) { - margin-bottom: calc(var(--fg-size-unit) * 3); + margin-bottom: calc(var(--kg-size-unit) * 3); } } diff --git a/src/lib/Drawer/Drawer.module.css b/src/lib/Drawer/Drawer.module.css index 51de3e3b..19f351a2 100755 --- a/src/lib/Drawer/Drawer.module.css +++ b/src/lib/Drawer/Drawer.module.css @@ -1,29 +1,29 @@ .provider { - font-family: var(--fg-font-family), sans-serif; + font-family: var(--kg-font-family), sans-serif; } .drawer { - background: var(--fg-color-do); + background: var(--kg-color-do); bottom: 0; display: flex; flex-direction: column; - padding: calc(var(--fg-size-unit) * 8) calc(var(--fg-size-unit) * 4); + padding: calc(var(--kg-size-unit) * 8) calc(var(--kg-size-unit) * 4); position: fixed; top: 0; width: 300px; } .left { - box-shadow: var(--fg-shadow-100); + box-shadow: var(--kg-shadow-100); left: 0; } .right { - box-shadow: calc(var(--fg-size-unit) * -1) var(--fg-size-unit) calc(var(--fg-size-unit) / 2) 0 - var(--fg-shadow-color); + box-shadow: calc(var(--kg-size-unit) * -1) var(--kg-size-unit) calc(var(--kg-size-unit) / 2) 0 + var(--kg-shadow-color); right: 0; } .brand { - margin-bottom: calc(var(--fg-size-unit) * 4); + margin-bottom: calc(var(--kg-size-unit) * 4); } diff --git a/src/lib/Figure/Figure.module.css b/src/lib/Figure/Figure.module.css index 541cc975..82d6da08 100644 --- a/src/lib/Figure/Figure.module.css +++ b/src/lib/Figure/Figure.module.css @@ -6,22 +6,22 @@ display: flex; flex-direction: row; justify-content: var(--position); - margin-bottom: calc(var(--fg-size-unit) * 3); + margin-bottom: calc(var(--kg-size-unit) * 3); } .figure { - background: var(--fg-background-000); - border: var(--fg-border-width-300) solid var(--fg-background-100); - border-radius: var(--fg-border-radius-300); + background: var(--kg-background-000); + border: var(--kg-border-width-300) solid var(--kg-background-100); + border-radius: var(--kg-border-radius-300); display: flex; flex-direction: column; - padding: calc(var(--fg-size-unit) * 2); + padding: calc(var(--kg-size-unit) * 2); & figcaption { - color: var(--fg-color-sol); - font-size: var(--fg-font-size-small); + color: var(--kg-color-sol); + font-size: var(--kg-font-size-small); font-style: italic; - margin-top: calc(var(--fg-size-unit) * 2); + margin-top: calc(var(--kg-size-unit) * 2); text-align: center; } diff --git a/src/lib/Form/Form.module.css b/src/lib/Form/Form.module.css index def6bb4e..ac750a37 100644 --- a/src/lib/Form/Form.module.css +++ b/src/lib/Form/Form.module.css @@ -1,5 +1,5 @@ .form { display: flex; flex-direction: column; - gap: calc(var(--fg-size-unit) * 4); + gap: calc(var(--kg-size-unit) * 4); } diff --git a/src/lib/FormField/FormField.module.css b/src/lib/FormField/FormField.module.css index 8b72ff44..45a65964 100644 --- a/src/lib/FormField/FormField.module.css +++ b/src/lib/FormField/FormField.module.css @@ -3,29 +3,29 @@ flex-direction: column; max-width: 100%; -webkit-tap-highlight-color: transparent; - width: var(--fg-input-width); + width: var(--kg-input-width); } .label { - color: var(--fg-color-sol); + color: var(--kg-color-sol); cursor: pointer; - font-size: var(--fg-font-size-large); - font-weight: var(--fg-font-weight-bolder); + font-size: var(--kg-font-size-large); + font-weight: var(--kg-font-weight-bolder); line-height: 1; - margin-bottom: calc(var(--fg-size-unit) * 2); + margin-bottom: calc(var(--kg-size-unit) * 2); &.required::after { - color: var(--fg-color-do); + color: var(--kg-color-do); content: "*"; font-size: 24px; line-height: 18px; - margin-left: calc(var(--fg-size-unit) / 2); + margin-left: calc(var(--kg-size-unit) / 2); } } .hint { - color: var(--fg-background-300); - font-size: var(--fg-font-size-extra-small); - margin-top: var(--fg-size-unit); + color: var(--kg-background-300); + font-size: var(--kg-font-size-extra-small); + margin-top: var(--kg-size-unit); width: 100%; } diff --git a/src/lib/InputCheckbox/InputCheckbox.module.css b/src/lib/InputCheckbox/InputCheckbox.module.css index 46c2dfa8..1d93ee67 100644 --- a/src/lib/InputCheckbox/InputCheckbox.module.css +++ b/src/lib/InputCheckbox/InputCheckbox.module.css @@ -9,25 +9,25 @@ .input { --bg-color: #fff; - --border-color: var(--fg-color-sol); - --center-color: var(--fg-color-la); + --border-color: var(--kg-color-sol); + --center-color: var(--kg-color-la); appearance: none; background-color: var(--bg-color); - border: var(--fg-border-width-300) solid var(--border-color); - border-radius: var(--fg-border-radius-200); + border: var(--kg-border-width-300) solid var(--border-color); + border-radius: var(--kg-border-radius-200); cursor: pointer; display: block; height: 24px; margin: 0; position: relative; transition: - background-color var(--fg-time-sm) ease-in-out, - border-color var(--fg-time-sm) ease-in-out; + background-color var(--kg-time-sm) ease-in-out, + border-color var(--kg-time-sm) ease-in-out; width: 24px; &::before { - --size: calc((var(--fg-size-unit) * 2) - 2px); + --size: calc((var(--kg-size-unit) * 2) - 2px); background-color: var(--center-color); content: ""; @@ -38,13 +38,13 @@ top: 50%; transform: translate(-50%, -50%); transition: - background-color var(--fg-time-sm) ease-in-out, - opacity var(--fg-time-sm) ease-in-out; + background-color var(--kg-time-sm) ease-in-out, + opacity var(--kg-time-sm) ease-in-out; width: var(--size); } &:--disabledSelector { - --border-color: var(--fg-background-100); + --border-color: var(--kg-background-100); cursor: not-allowed; } @@ -54,30 +54,30 @@ } &:--focusSelector { - --border-color: var(--fg-color-do); - --center-color: var(--fg-color-do); + --border-color: var(--kg-color-do); + --center-color: var(--kg-color-do); } } .label { - --validation-icon-placeholder: calc(var(--fg-size-unit) * 5); + --validation-icon-placeholder: calc(var(--kg-size-unit) * 5); - color: var(--fg-text-color); + color: var(--kg-text-color); cursor: pointer; - font-size: var(--fg-font-size-medium); - margin-left: var(--fg-size-unit); - margin-right: var(--fg-size-unit); + font-size: var(--kg-font-size-medium); + margin-left: var(--kg-size-unit); + margin-right: var(--kg-size-unit); &:last-child { margin-right: var(--validation-icon-placeholder); } &.required::after { - color: var(--fg-color-do); + color: var(--kg-color-do); content: "*"; font-size: 24px; line-height: 18px; - margin-left: calc(var(--fg-size-unit) / 2); + margin-left: calc(var(--kg-size-unit) / 2); } } @@ -86,14 +86,14 @@ } .input:--disabledSelector + .label { - color: var(--fg-background-200); + color: var(--kg-background-200); cursor: not-allowed; } .wrapper:hover { .input:not(:--disabledSelector) { - --border-color: var(--fg-color-re); - --center-color: var(--fg-color-do); + --border-color: var(--kg-color-re); + --center-color: var(--kg-color-do); } .input:--invalidSelector { @@ -101,6 +101,6 @@ } .input:--invalidSelector + .label { - color: var(--fg-color-error); + color: var(--kg-color-error); } } diff --git a/src/lib/InputColor/InputColor.module.css b/src/lib/InputColor/InputColor.module.css index 0718617d..64b57373 100644 --- a/src/lib/InputColor/InputColor.module.css +++ b/src/lib/InputColor/InputColor.module.css @@ -1,9 +1,9 @@ @import url("@/internal/inputs/stateSelectorsInteractive.css"); .wrapper { - --gap: var(--fg-size-unit); - --selected-color: var(--fg-color-do); - --inverted-color: var(--fg-text-color); + --gap: var(--kg-size-unit); + --selected-color: var(--kg-color-do); + --inverted-color: var(--kg-text-color); align-items: center; display: flex; @@ -16,7 +16,7 @@ } .toggle { - --toggle-width: calc(var(--fg-size-unit) * 4); + --toggle-width: calc(var(--kg-size-unit) * 4); --toggle-height: var(--toggle-width); cursor: pointer; @@ -27,19 +27,19 @@ .icon { align-items: center; - color: var(--fg-color-sol); + color: var(--kg-color-sol); cursor: pointer; display: flex; flex-direction: row; /* make flex direction horizontal */ - height: calc(var(--fg-size-unit) * 4); + height: calc(var(--kg-size-unit) * 4); justify-content: center; /* center items horizontally, in this case */ left: 50%; pointer-events: none; position: absolute; top: 50%; transform: translate(-50%, -50%); - transition: color var(--fg-time-sm) ease-in-out; - width: calc(var(--fg-size-unit) * 4); + transition: color var(--kg-time-sm) ease-in-out; + width: calc(var(--kg-size-unit) * 4); } .input { @@ -49,7 +49,7 @@ width: var(--toggle-width); &:--focusSelector { - border-color: var(--fg-color-re); + border-color: var(--kg-color-re); } &:--disabledSelector { @@ -58,49 +58,49 @@ } .input:--disabledSelector + .icon { - color: var(--fg-background-100); + color: var(--kg-background-100); } .input:--focusSelector + .icon { - color: var(--fg-color-do); + color: var(--kg-color-do); } .input:--invalidSelector:focus + .icon { - color: var(--fg-color-error); + color: var(--kg-color-error); } .label { background-color: var(--selected-color); - border: var(--fg-border-width-300) solid var(--selected-color); - border-radius: var(--fg-border-radius-300); + border: var(--kg-border-width-300) solid var(--selected-color); + border-radius: var(--kg-border-radius-300); box-sizing: content-box; color: var(--inverted-color); cursor: pointer; flex-grow: 0; flex-shrink: 0; - font-size: var(--fg-font-size-medium); + font-size: var(--kg-font-size-medium); min-width: 0; - padding: var(--fg-size-unit) calc(var(--fg-size-unit) * 1.5); + padding: var(--kg-size-unit) calc(var(--kg-size-unit) * 1.5); width: 7ch; &:--disabledSelector { - background-color: var(--fg-background-100); - border-color: var(--fg-background-100); + background-color: var(--kg-background-100); + border-color: var(--kg-background-100); cursor: not-allowed; } } .toggle:has(.input:--focusSelector) + .label { - border-color: var(--fg-color-re); + border-color: var(--kg-color-re); } .toggle:has(.input:--invalidSelector) + .label { - border-color: var(--fg-color-error); + border-color: var(--kg-color-error); } .toggle:has(.input:--disabledSelector) + .label { - background: var(--fg-background-100); - border-color: var(--fg-background-100); + background: var(--kg-background-100); + border-color: var(--kg-background-100); cursor: not-allowed; user-select: none; } @@ -108,21 +108,21 @@ .toggle:has(.input:--readOnlySelector:focus) + .label, .toggle:has(.input:--readOnlySelector:hover) + .label, .toggle:has(.input:--readOnlySelector) + .label:hover { - background-color: var(--fg-color-mi); - border: 3px solid var(--fg-color-do); + background-color: var(--kg-color-mi); + border: 3px solid var(--kg-color-do); } .wrapper:hover { & .input + .icon { - color: var(--fg-color-re); + color: var(--kg-color-re); } & .input:--disabledSelector + .icon { - color: var(--fg-background-100); + color: var(--kg-background-100); } & .input:--invalidSelector + .icon { - color: var(--fg-color-error); + color: var(--kg-color-error); } } diff --git a/src/lib/InputDate/InputDate.module.css b/src/lib/InputDate/InputDate.module.css index 6c8e21f7..4b39382e 100644 --- a/src/lib/InputDate/InputDate.module.css +++ b/src/lib/InputDate/InputDate.module.css @@ -1,8 +1,8 @@ @import url("@/internal/inputs/stateSelectorsTextual.css"); .wrapper { - --gap: var(--fg-size-unit); - --validation-icon-placeholder: calc(var(--fg-size-unit) * 4 + var(--gap)); + --gap: var(--kg-size-unit); + --validation-icon-placeholder: calc(var(--kg-size-unit) * 4 + var(--gap)); align-items: center; display: flex; @@ -15,7 +15,7 @@ } .toggle { - --toggle-width: calc(var(--fg-size-unit) * 4); + --toggle-width: calc(var(--kg-size-unit) * 4); --toggle-height: var(--toggle-width); cursor: pointer; @@ -25,11 +25,11 @@ } .icon { - color: var(--fg-color-sol); + color: var(--kg-color-sol); cursor: pointer; height: var(--toggle-height); position: absolute; - transition: color var(--fg-time-sm) ease-in-out; + transition: color var(--kg-time-sm) ease-in-out; width: var(--toggle-width); z-index: 2; } @@ -51,34 +51,34 @@ } .input:--disabledSelector + .icon { - color: var(--fg-background-100); + color: var(--kg-background-100); } .input:--focusSelector + .icon { - color: var(--fg-color-do); + color: var(--kg-color-do); } .input:--invalidSelector:focus + .icon { - color: var(--fg-color-error); + color: var(--kg-color-error); } .label { - background-color: var(--fg-color-mi); - border: var(--fg-border-width-300) solid var(--fg-color-mi); - border-radius: var(--fg-border-radius-300); + background-color: var(--kg-color-mi); + border: var(--kg-border-width-300) solid var(--kg-color-mi); + border-radius: var(--kg-border-radius-300); box-sizing: content-box; - color: var(--fg-text-color); + color: var(--kg-text-color); cursor: pointer; flex-grow: 0; flex-shrink: 0; - font-size: var(--fg-font-size-medium); - height: calc(var(--fg-input-height) - var(--fg-size-unit) * 3); + font-size: var(--kg-font-size-medium); + height: calc(var(--kg-input-height) - var(--kg-size-unit) * 3); min-width: 0; - padding: var(--fg-size-unit) calc(var(--fg-size-unit) * 1.5); + padding: var(--kg-size-unit) calc(var(--kg-size-unit) * 1.5); text-align: center; transition: - background-color var(--fg-time-sm) ease-in-out, - border-color var(--fg-time-sm) ease-in-out; + background-color var(--kg-time-sm) ease-in-out, + border-color var(--kg-time-sm) ease-in-out; user-select: none; white-space: nowrap; width: 10ch; @@ -89,36 +89,36 @@ } .toggle:has(.input:--focusSelector) + .label { - border-color: var(--fg-color-re); + border-color: var(--kg-color-re); } .toggle:has(.input:--readOnlySelector) + .label:hover, .toggle:has(.input:--readOnlySelector:hover) + .label, .toggle:has(.input:--readOnlySelector:focus) + .label { - background-color: var(--fg-color-mi); - border: var(--fg-border-width-300) solid var(--fg-color-do); + background-color: var(--kg-color-mi); + border: var(--kg-border-width-300) solid var(--kg-color-do); user-select: all; } .toggle:has(.input:--disabledSelector) + .label { - background-color: var(--fg-background-100); - border-color: var(--fg-background-100); + background-color: var(--kg-background-100); + border-color: var(--kg-background-100); cursor: not-allowed; } .toggle:has(.input:--invalidSelector:focus) + .label, .toggle:has(.input:--invalidSelector:hover) + .label, .toggle:has(.input:--invalidSelector) + .label:hover { - border-color: var(--fg-color-error); + border-color: var(--kg-color-error); } .wrapper:hover { & .input:not(:--disabledSelector) + .icon { - color: var(--fg-color-re); + color: var(--kg-color-re); } & .input:--invalidSelector + .icon { - color: var(--fg-color-error); + color: var(--kg-color-error); } } diff --git a/src/lib/InputFile/InputFile.module.css b/src/lib/InputFile/InputFile.module.css index 333082b7..a37c3832 100644 --- a/src/lib/InputFile/InputFile.module.css +++ b/src/lib/InputFile/InputFile.module.css @@ -5,8 +5,8 @@ } .input-file { - --gap: var(--fg-size-unit); - --validation-icon-placeholder: calc(var(--fg-size-unit) * 4 + var(--gap)); + --gap: var(--kg-size-unit); + --validation-icon-placeholder: calc(var(--kg-size-unit) * 4 + var(--gap)); align-items: center; display: flex; @@ -19,7 +19,7 @@ } .toggle { - --toggle-width: calc(var(--fg-size-unit) * 4); + --toggle-width: calc(var(--kg-size-unit) * 4); --toggle-height: var(--toggle-width); cursor: pointer; @@ -44,27 +44,27 @@ } .icon { - color: var(--fg-color-sol); + color: var(--kg-color-sol); cursor: pointer; height: var(--toggle-height); - transition: color var(--fg-time-sm) ease-in-out; + transition: color var(--kg-time-sm) ease-in-out; width: var(--toggle-width); } .label { - background-color: var(--fg-color-mi); - border: var(--fg-border-width-300) solid var(--fg-color-mi); - border-radius: var(--fg-border-radius-300); - color: var(--fg-color-sol); + background-color: var(--kg-color-mi); + border: var(--kg-border-width-300) solid var(--kg-color-mi); + border-radius: var(--kg-border-radius-300); + color: var(--kg-color-sol); cursor: pointer; flex-grow: 1; - font-size: var(--fg-font-size-medium); + font-size: var(--kg-font-size-medium); line-height: 1.2; max-width: calc(100% - var(--validation-icon-placeholder)); - min-height: calc(var(--fg-size-unit) * 6.33); + min-height: calc(var(--kg-size-unit) * 6.33); min-width: 0; overflow: hidden; - padding: var(--fg-size-unit) calc(var(--fg-size-unit) * 1.5); + padding: var(--kg-size-unit) calc(var(--kg-size-unit) * 1.5); text-overflow: ellipsis; white-space: nowrap; width: var(--input-width); @@ -75,40 +75,40 @@ } .input:--disabledSelector + .icon { - color: var(--fg-background-100); + color: var(--kg-background-100); } .input:--focusSelector + .icon { - color: var(--fg-color-do); + color: var(--kg-color-do); } .input:--invalidSelector:focus + .icon { - color: var(--fg-color-error); + color: var(--kg-color-error); } .toggle:has(.input:--disabledSelector) + .label { - background-color: var(--fg-background-100); - border-color: var(--fg-background-100); + background-color: var(--kg-background-100); + border-color: var(--kg-background-100); cursor: not-allowed; } .toggle:has(.input:--focusSelector) + .label { - border-color: var(--fg-color-re); + border-color: var(--kg-color-re); } .toggle:has(.input:--invalidSelector:focus) + .label, .toggle:has(.input:--invalidSelector:hover) + .label, .toggle:has(.input:--invalidSelector) + .label:hover { - border-color: var(--fg-color-error); + border-color: var(--kg-color-error); } .input-file:hover { & .input:not(:disabled, :focus) + .icon { - color: var(--fg-color-re); + color: var(--kg-color-re); } & .input:--invalidSelector + .icon { - color: var(--fg-color-error); + color: var(--kg-color-error); } } diff --git a/src/lib/InputGroup/InputGroup.module.css b/src/lib/InputGroup/InputGroup.module.css index 87c07f7e..e0720769 100644 --- a/src/lib/InputGroup/InputGroup.module.css +++ b/src/lib/InputGroup/InputGroup.module.css @@ -5,28 +5,28 @@ } .legend:not(:empty) { - color: var(--fg-color-sol); + color: var(--kg-color-sol); cursor: default; - font-size: var(--fg-font-size-large); + font-size: var(--kg-font-size-large); font-weight: 500; - margin-bottom: calc(var(--fg-size-unit) * 1.5); + margin-bottom: calc(var(--kg-size-unit) * 1.5); user-select: none; &.disabled { - color: var(--fg-background-200); + color: var(--kg-background-200); } } .inputs { display: flex; flex-direction: column; - padding-left: calc(var(--fg-size-unit) * 2); - row-gap: calc(var(--fg-size-unit) * 1.5); + padding-left: calc(var(--kg-size-unit) * 2); + row-gap: calc(var(--kg-size-unit) * 1.5); } .hint { - color: var(--fg-background-300); - font-size: var(--fg-font-size-extra-small); - margin-top: calc(var(--fg-size-unit) * 1.5); + color: var(--kg-background-300); + font-size: var(--kg-font-size-extra-small); + margin-top: calc(var(--kg-size-unit) * 1.5); width: 100%; } diff --git a/src/lib/InputNumber/InputNumber.module.css b/src/lib/InputNumber/InputNumber.module.css index 5bc19a15..4876cd83 100644 --- a/src/lib/InputNumber/InputNumber.module.css +++ b/src/lib/InputNumber/InputNumber.module.css @@ -1,8 +1,8 @@ @import url("@/internal/inputs/stateSelectorsTextual.css"); .wrapper { - --gap: var(--fg-size-unit); - --validation-icon-placeholder: calc(var(--fg-size-unit) * 4 + var(--gap)); + --gap: var(--kg-size-unit); + --validation-icon-placeholder: calc(var(--kg-size-unit) * 4 + var(--gap)); align-items: center; display: flex; @@ -19,18 +19,18 @@ .input { appearance: textfield; - background-color: var(--fg-color-mi); - border: var(--fg-border-width-300) solid var(--fg-color-mi); - border-radius: var(--fg-border-radius-300); - color: var(--fg-text-color); + background-color: var(--kg-color-mi); + border: var(--kg-border-width-300) solid var(--kg-color-mi); + border-radius: var(--kg-border-radius-300); + color: var(--kg-text-color); flex-grow: 0; - font-size: var(--fg-font-size-medium); + font-size: var(--kg-font-size-medium); max-width: calc(100% - var(--validation-icon-placeholder)); min-width: 0; - padding: var(--fg-size-unit) calc(var(--fg-size-unit) * 1.5); + padding: var(--kg-size-unit) calc(var(--kg-size-unit) * 1.5); transition: - background-color var(--fg-time-sm) ease-in-out, - border-color var(--fg-time-sm) ease-in-out; + background-color var(--kg-time-sm) ease-in-out, + border-color var(--kg-time-sm) ease-in-out; @supports (background: -webkit-named-image(i)) { width: calc(var(--size) * 1ch); @@ -45,19 +45,19 @@ } &::placeholder { - color: var(--fg-color-sol); + color: var(--kg-color-sol); opacity: 0.66; } &:--readOnlySelector { - background-color: var(--fg-color-mi); - border: 3px solid var(--fg-color-do); + background-color: var(--kg-color-mi); + border: 3px solid var(--kg-color-do); user-select: all; } &:--disabledSelector { - background-color: var(--fg-background-100); - border-color: var(--fg-background-100); + background-color: var(--kg-background-100); + border-color: var(--kg-background-100); cursor: not-allowed; } @@ -66,41 +66,41 @@ } &:--focusSelector { - background-color: var(--fg-background-000); - border-color: var(--fg-color-re); + background-color: var(--kg-background-000); + border-color: var(--kg-color-re); outline: none; } &:--invalidSelector:focus { - background-color: var(--fg-background-000); - border-color: var(--fg-color-error); + background-color: var(--kg-background-000); + border-color: var(--kg-color-error); } } .spinner { align-items: center; /* center items horizontally, in this case */ - color: var(--fg-color-sol); + color: var(--kg-color-sol); cursor: pointer; display: flex; flex-direction: column; /* make flex direction vertical */ flex-shrink: 0; - height: calc(var(--fg-size-unit) * 6); + height: calc(var(--kg-size-unit) * 6); justify-content: center; /* center items vertically, in this case */ - width: calc(var(--fg-size-unit) * 4); + width: calc(var(--kg-size-unit) * 4); & svg { color: inherit; - height: calc(var(--fg-size-unit) * 3); - transition: color var(--fg-time-sm) ease-in-out; - width: calc(var(--fg-size-unit) * 3); + height: calc(var(--kg-size-unit) * 3); + transition: color var(--kg-time-sm) ease-in-out; + width: calc(var(--kg-size-unit) * 3); &:active { - color: var(--fg-color-do); + color: var(--kg-color-do); } } &:hover { - color: var(--fg-color-re); + color: var(--kg-color-re); } } @@ -108,7 +108,7 @@ cursor: not-allowed; & svg { - color: var(--fg-background-100); + color: var(--kg-background-100); pointer-events: none; } } @@ -116,15 +116,15 @@ .spinner:has(+ .input:--invalidSelector):hover, .spinner:has(+ .input:--invalidSelector:hover), .spinner:has(+ .input:--invalidSelector:focus) { - color: var(--fg-color-error); + color: var(--kg-color-error); } .spinner:has(+ .input:--focusSelector) { - color: var(--fg-color-do); + color: var(--kg-color-do); } .spinner:has(+ .input:--hoverSelector) { - color: var(--fg-color-re); + color: var(--kg-color-re); } .validation { diff --git a/src/lib/InputPassword/InputPassword.module.css b/src/lib/InputPassword/InputPassword.module.css index e8214368..7e2a0fc2 100644 --- a/src/lib/InputPassword/InputPassword.module.css +++ b/src/lib/InputPassword/InputPassword.module.css @@ -1,8 +1,8 @@ @import url("@/internal/inputs/stateSelectorsTextual.css"); .wrapper { - --gap: var(--fg-size-unit); - --validation-icon-placeholder: calc(var(--fg-size-unit) * 4 + var(--gap)); + --gap: var(--kg-size-unit); + --validation-icon-placeholder: calc(var(--kg-size-unit) * 4 + var(--gap)); align-items: center; display: flex; @@ -18,37 +18,37 @@ } .input { - background-color: var(--fg-color-mi); - border: var(--fg-border-width-300) solid var(--fg-color-mi); - border-radius: var(--fg-border-radius-300); - color: var(--fg-text-color); + background-color: var(--kg-color-mi); + border: var(--kg-border-width-300) solid var(--kg-color-mi); + border-radius: var(--kg-border-radius-300); + color: var(--kg-text-color); flex: 1; - font-size: var(--fg-font-size-medium); + font-size: var(--kg-font-size-medium); max-width: calc(100% - var(--validation-icon-placeholder)); min-width: 0; - padding: var(--fg-size-unit) calc(var(--fg-size-unit) * 1.5); + padding: var(--kg-size-unit) calc(var(--kg-size-unit) * 1.5); transition: - background-color var(--fg-time-sm) ease-in-out, - border-color var(--fg-time-sm) ease-in-out; + background-color var(--kg-time-sm) ease-in-out, + border-color var(--kg-time-sm) ease-in-out; &:last-child { margin-right: var(--validation-icon-placeholder); } &::placeholder { - color: var(--fg-color-sol); + color: var(--kg-color-sol); opacity: 0.66; } &:--readOnlySelector { - background-color: var(--fg-color-mi); - border: 3px solid var(--fg-color-do); + background-color: var(--kg-color-mi); + border: 3px solid var(--kg-color-do); user-select: all; } &:--disabledSelector { - background-color: var(--fg-background-100); - border-color: var(--fg-background-100); + background-color: var(--kg-background-100); + border-color: var(--kg-background-100); cursor: not-allowed; } @@ -57,45 +57,45 @@ } &:--focusSelector { - background-color: var(--fg-background-000); - border-color: var(--fg-color-re); + background-color: var(--kg-background-000); + border-color: var(--kg-color-re); outline: none; } &:--invalidSelector:focus { - border-color: var(--fg-color-error); + border-color: var(--kg-color-error); } } .prefix { - color: var(--fg-color-sol); + color: var(--kg-color-sol); cursor: pointer; flex-shrink: 0; - height: calc(var(--fg-size-unit) * 4); - width: calc(var(--fg-size-unit) * 4); + height: calc(var(--kg-size-unit) * 4); + width: calc(var(--kg-size-unit) * 4); & svg { color: inherit; height: inherit; - transition: color var(--fg-time-sm) ease-in-out; + transition: color var(--kg-time-sm) ease-in-out; width: inherit; } &:hover { - color: var(--fg-color-re); + color: var(--kg-color-re); } } .prefix:has(+ .input:--invalidSelector):hover, .prefix:has(+ .input:--invalidSelector:hover), .prefix:has(+ .input:--invalidSelector:focus) { - color: var(--fg-color-error); + color: var(--kg-color-error); } .prefix:has(+ .input:--focusSelector) { - color: var(--fg-color-do); + color: var(--kg-color-do); } .prefix:has(+ .input:--hoverSelector) { - color: var(--fg-color-re); + color: var(--kg-color-re); } diff --git a/src/lib/InputRadio/InputRadio.module.css b/src/lib/InputRadio/InputRadio.module.css index 41472627..c056ab2d 100644 --- a/src/lib/InputRadio/InputRadio.module.css +++ b/src/lib/InputRadio/InputRadio.module.css @@ -9,25 +9,25 @@ .label { cursor: pointer; - margin-left: var(--fg-size-unit); + margin-left: var(--kg-size-unit); &.required::after { - color: var(--fg-color-do); + color: var(--kg-color-do); content: "*"; font-size: 24px; line-height: 18px; - margin-left: calc(var(--fg-size-unit) / 2); + margin-left: calc(var(--kg-size-unit) / 2); } } .input { --bg-color: #fff; - --border-color: var(--fg-color-sol); - --center-color: var(--fg-color-la); + --border-color: var(--kg-color-sol); + --center-color: var(--kg-color-la); appearance: none; background-color: var(--bg-color); - border: var(--fg-border-width-300) solid var(--border-color); + border: var(--kg-border-width-300) solid var(--border-color); border-radius: 50%; cursor: pointer; display: block; @@ -35,12 +35,12 @@ margin: 0; position: relative; transition: - background-color var(--fg-time-sm) ease-in-out, - border-color var(--fg-time-sm) ease-in-out; + background-color var(--kg-time-sm) ease-in-out, + border-color var(--kg-time-sm) ease-in-out; width: 24px; &::before { - --size: calc((var(--fg-size-unit) * 2) - 2px); + --size: calc((var(--kg-size-unit) * 2) - 2px); background-color: var(--center-color); border-radius: 50%; @@ -52,13 +52,13 @@ top: 50%; transform: translate(-50%, -50%); transition: - background-color var(--fg-time-sm) ease-in-out, - opacity var(--fg-time-sm) ease-in-out; + background-color var(--kg-time-sm) ease-in-out, + opacity var(--kg-time-sm) ease-in-out; width: var(--size); } &:--disabledSelector { - --border-color: var(--fg-background-100); + --border-color: var(--kg-background-100); cursor: not-allowed; } @@ -68,20 +68,20 @@ } &:--focusSelector { - --border-color: var(--fg-color-do); - --center-color: var(--fg-color-do); + --border-color: var(--kg-color-do); + --center-color: var(--kg-color-do); } &:--disabledSelector + .label { - color: var(--fg-background-200); + color: var(--kg-background-200); cursor: not-allowed; } } .wrapper:hover { .input:not(:--disabledSelector, :--invalidSelector) { - --border-color: var(--fg-color-re); - --center-color: var(--fg-color-do); + --border-color: var(--kg-color-re); + --center-color: var(--kg-color-do); } .input:--invalidSelector { @@ -89,7 +89,7 @@ } .input:--invalidSelector + .label { - color: var(--fg-color-error); + color: var(--kg-color-error); } } diff --git a/src/lib/InputRange/InputRange.module.css b/src/lib/InputRange/InputRange.module.css index 394c7235..29555791 100644 --- a/src/lib/InputRange/InputRange.module.css +++ b/src/lib/InputRange/InputRange.module.css @@ -5,8 +5,8 @@ } .input-range { - --gap: var(--fg-size-unit); - --validation-icon-placeholder: calc(var(--fg-size-unit) * 4 + var(--gap)); + --gap: var(--kg-size-unit); + --validation-icon-placeholder: calc(var(--kg-size-unit) * 4 + var(--gap)); align-items: flex-start; display: flex; @@ -14,29 +14,29 @@ gap: var(--gap); max-width: 100%; -webkit-tap-highlight-color: transparent; - width: var(--fg-input-width); + width: var(--kg-input-width); } .input { - --track-height: calc(var(--fg-size-unit) / 2); - --slider-height: calc(var(--fg-size-unit) * 3); + --track-height: calc(var(--kg-size-unit) / 2); + --slider-height: calc(var(--kg-size-unit) * 3); --slider-width: var(--slider-height); - --track-color: var(--fg-color-sol); - --track-color-active: var(--fg-color-re); - --thumb-color: var(--fg-color-la); - --thumb-color-active: var(--fg-color-do); + --track-color: var(--kg-color-sol); + --track-color-active: var(--kg-color-re); + --thumb-color: var(--kg-color-la); + --thumb-color-active: var(--kg-color-do); &::-moz-range-track { background: var(--track-color); height: var(--track-height); - transition: background-color var(--fg-time-sm) ease-in-out; + transition: background-color var(--kg-time-sm) ease-in-out; } &::-webkit-slider-runnable-track { appearance: none; background: var(--track-color); height: var(--track-height); - transition: background-color var(--fg-time-sm) ease-in-out; + transition: background-color var(--kg-time-sm) ease-in-out; } &::-webkit-slider-thumb { @@ -47,7 +47,7 @@ cursor: grab; height: var(--slider-height); margin-top: calc(var(--track-height) / 2 - var(--slider-height) / 2); - transition: background-color var(--fg-time-sm) ease-in-out; + transition: background-color var(--kg-time-sm) ease-in-out; width: var(--slider-width); } @@ -55,7 +55,7 @@ background-color: var(--thumb-color); border: none; cursor: grab; - transition: background-color var(--fg-time-sm) ease-in-out; + transition: background-color var(--kg-time-sm) ease-in-out; } &:--hoverSelector { @@ -70,21 +70,21 @@ &:--disabledSelector { &::-moz-range-thumb { - background-color: var(--fg-background-100); + background-color: var(--kg-background-100); cursor: not-allowed; } &::-webkit-slider-thumb { - background-color: var(--fg-background-100); + background-color: var(--kg-background-100); cursor: not-allowed; } &::-moz-range-track { - background: var(--fg-background-100); + background: var(--kg-background-100); } &::-webkit-slider-runnable-track { - background: var(--fg-background-100); + background: var(--kg-background-100); } } @@ -119,23 +119,23 @@ &:--invalidSelector:focus { &::-moz-range-track { - background: var(--fg-color-error); + background: var(--kg-color-error); } &::-webkit-slider-runnable-track { - background: var(--fg-color-error); + background: var(--kg-color-error); } } } .scale { - color: var(--fg-color-sol); + color: var(--kg-color-sol); cursor: default; display: flex; flex-direction: column; - font-family: var(--fg-font-family); - font-size: var(--fg-font-size-extra-small); - font-weight: var(--fg-font-weight-bold); + font-family: var(--kg-font-family); + font-size: var(--kg-font-size-extra-small); + font-weight: var(--kg-font-weight-bold); justify-content: space-between; user-select: none; width: 100%; @@ -143,7 +143,7 @@ } .input:--disabledSelector + .scale { - color: var(--fg-background-100); + color: var(--kg-background-100); } .mark { @@ -151,10 +151,10 @@ } .output { - color: var(--fg-color-sol); + color: var(--kg-color-sol); flex-shrink: 0; - font-size: var(--fg-font-size-medium); - font-weight: var(--fg-font-weight-bold); + font-size: var(--kg-font-size-medium); + font-weight: var(--kg-font-weight-bold); text-align: right; width: calc(var(--output-length) * 1ch); @@ -164,11 +164,11 @@ } .scale-wrapper:has(.input:--disabledSelector) + .output { - color: var(--fg-background-100); + color: var(--kg-background-100); } .scale-wrapper:has(.input:--invalidSelector:focus) + .output { - color: var(--fg-color-error); + color: var(--kg-color-error); } .validation { @@ -177,11 +177,11 @@ } .prefix { - color: var(--fg-color-sol); + color: var(--kg-color-sol); cursor: pointer; flex-shrink: 0; - height: calc(var(--fg-size-unit) * 4); - width: calc(var(--fg-size-unit) * 4); + height: calc(var(--kg-size-unit) * 4); + width: calc(var(--kg-size-unit) * 4); & svg { color: inherit; @@ -190,11 +190,11 @@ } &:hover { - color: var(--fg-color-do); + color: var(--kg-color-do); } } .prefix:has(+ .scale-wrapper .input:--invalidSelector):hover, .prefix:has(+ .scale-wrapper .input:--invalidSelector:focus) { - color: var(--fg-color-error); + color: var(--kg-color-error); } diff --git a/src/lib/InputText/InputText.module.css b/src/lib/InputText/InputText.module.css index 3dc0ee6f..d9bbf3dd 100644 --- a/src/lib/InputText/InputText.module.css +++ b/src/lib/InputText/InputText.module.css @@ -1,8 +1,8 @@ @import url("@/internal/inputs/stateSelectorsTextual.css"); .wrapper { - --gap: var(--fg-size-unit); - --validation-icon-placeholder: calc(var(--fg-size-unit) * 4 + var(--gap)); + --gap: var(--kg-size-unit); + --validation-icon-placeholder: calc(var(--kg-size-unit) * 4 + var(--gap)); align-items: center; display: flex; @@ -18,37 +18,37 @@ } .input { - background-color: var(--fg-color-mi); - border: var(--fg-border-width-300) solid var(--fg-color-mi); - border-radius: var(--fg-border-radius-300); - color: var(--fg-text-color); + background-color: var(--kg-color-mi); + border: var(--kg-border-width-300) solid var(--kg-color-mi); + border-radius: var(--kg-border-radius-300); + color: var(--kg-text-color); flex: 1; - font-size: var(--fg-font-size-medium); + font-size: var(--kg-font-size-medium); max-width: 100%; min-width: 0; - padding: var(--fg-size-unit) calc(var(--fg-size-unit) * 1.5); + padding: var(--kg-size-unit) calc(var(--kg-size-unit) * 1.5); transition: - background-color var(--fg-time-sm) ease-in-out, - border-color var(--fg-time-sm) ease-in-out; + background-color var(--kg-time-sm) ease-in-out, + border-color var(--kg-time-sm) ease-in-out; &:last-child { margin-right: var(--validation-icon-placeholder); } &::placeholder { - color: var(--fg-color-sol); + color: var(--kg-color-sol); opacity: 0.66; } &:--readOnlySelector { - background-color: var(--fg-color-mi); - border: var(--fg-border-width-300) solid var(--fg-color-do); + background-color: var(--kg-color-mi); + border: var(--kg-border-width-300) solid var(--kg-color-do); user-select: all; } &:--disabledSelector { - background-color: var(--fg-background-100); - border-color: var(--fg-background-100); + background-color: var(--kg-background-100); + border-color: var(--kg-background-100); cursor: not-allowed; } @@ -57,46 +57,46 @@ } &:--focusSelector { - background-color: var(--fg-background-000); - border-color: var(--fg-color-re); + background-color: var(--kg-background-000); + border-color: var(--kg-color-re); outline: none; } &:--invalidSelector:focus { - background-color: var(--fg-background-000); - border-color: var(--fg-color-error); + background-color: var(--kg-background-000); + border-color: var(--kg-color-error); } } .prefix { - color: var(--fg-color-sol); + color: var(--kg-color-sol); cursor: pointer; flex-shrink: 0; - height: calc(var(--fg-size-unit) * 4); - width: calc(var(--fg-size-unit) * 4); + height: calc(var(--kg-size-unit) * 4); + width: calc(var(--kg-size-unit) * 4); & svg { color: inherit; height: inherit; - transition: color var(--fg-time-sm) ease-in-out; + transition: color var(--kg-time-sm) ease-in-out; width: inherit; } &:hover { - color: var(--fg-color-re); + color: var(--kg-color-re); } } .prefix:has(+ .input:--invalidSelector):hover, .prefix:has(+ .input:--invalidSelector:hover), .prefix:has(+ .input:--invalidSelector:focus) { - color: var(--fg-color-error); + color: var(--kg-color-error); } .prefix:has(+ .input:--focusSelector) { - color: var(--fg-color-do); + color: var(--kg-color-do); } .prefix:has(+ .input:--hoverSelector) { - color: var(--fg-color-re); + color: var(--kg-color-re); } diff --git a/src/lib/InputTime/InputTime.module.css b/src/lib/InputTime/InputTime.module.css index 52edbde2..7d59155f 100644 --- a/src/lib/InputTime/InputTime.module.css +++ b/src/lib/InputTime/InputTime.module.css @@ -1,8 +1,8 @@ @import url("@/internal/inputs/stateSelectorsTextual.css"); .wrapper { - --gap: var(--fg-size-unit); - --validation-icon-placeholder: calc(var(--fg-size-unit) * 4 + var(--gap)); + --gap: var(--kg-size-unit); + --validation-icon-placeholder: calc(var(--kg-size-unit) * 4 + var(--gap)); align-items: center; display: flex; @@ -18,24 +18,24 @@ } .input { - background-color: var(--fg-color-mi); - border: var(--fg-border-width-300) solid var(--fg-color-mi); - border-radius: var(--fg-border-radius-300); - color: var(--fg-text-color); + background-color: var(--kg-color-mi); + border: var(--kg-border-width-300) solid var(--kg-color-mi); + border-radius: var(--kg-border-radius-300); + color: var(--kg-text-color); flex-grow: 0; flex-shrink: 0; - font-family: var(--fg-font-family); - font-size: var(--fg-font-size-medium); - font-weight: var(--fg-font-weight-bolder); - height: var(--fg-input-height); - line-height: var(--fg-font-size-medium); + font-family: var(--kg-font-family); + font-size: var(--kg-font-size-medium); + font-weight: var(--kg-font-weight-bolder); + height: var(--kg-input-height); + line-height: var(--kg-font-size-medium); min-width: 0; - padding: var(--fg-size-unit) calc(var(--fg-size-unit) * 1.5); + padding: var(--kg-size-unit) calc(var(--kg-size-unit) * 1.5); text-align: center; transition: - background-color var(--fg-time-sm) ease-in-out, - border-color var(--fg-time-sm) ease-in-out; - width: calc(5ch + var(--fg-size-unit) * 5); + background-color var(--kg-time-sm) ease-in-out, + border-color var(--kg-time-sm) ease-in-out; + width: calc(5ch + var(--kg-size-unit) * 5); &::-webkit-calendar-picker-indicator { background: none; @@ -51,17 +51,17 @@ } &::placeholder { - color: var(--fg-color-sol); + color: var(--kg-color-sol); } &:--readOnlySelector { - background-color: var(--fg-color-mi); - border: var(--fg-border-width-300) solid var(--fg-color-do); + background-color: var(--kg-color-mi); + border: var(--kg-border-width-300) solid var(--kg-color-do); } &:--disabledSelector { - background-color: var(--fg-background-100); - border-color: var(--fg-background-100); + background-color: var(--kg-background-100); + border-color: var(--kg-background-100); cursor: not-allowed; } @@ -70,24 +70,24 @@ } &:--focusSelector { - background-color: var(--fg-background-000); - border-color: var(--fg-color-re); + background-color: var(--kg-background-000); + border-color: var(--kg-color-re); outline: none; } &:--invalidSelector:focus { - border-color: var(--fg-color-error); + border-color: var(--kg-color-error); } } .icon { - --icon-width: calc(var(--fg-size-unit) * 4); + --icon-width: calc(var(--kg-size-unit) * 4); - color: var(--fg-color-sol); + color: var(--kg-color-sol); cursor: pointer; height: var(--icon-width); position: relative; - transition: color var(--fg-time-sm) ease-in-out; + transition: color var(--kg-time-sm) ease-in-out; width: var(--icon-width); &:active { @@ -98,16 +98,16 @@ .icon:has(+ .input:--invalidSelector:hover), .icon:has(+ .input:--invalidSelector:focus), .icon:has(+ .input:--invalidSelector):hover { - color: var(--fg-color-error); + color: var(--kg-color-error); } .icon:hover:has(+ .input:not(:--disabledSelector)), .icon:has(+ .input:--hoverSelector) { - color: var(--fg-color-re); + color: var(--kg-color-re); } .icon:has(+ .input:--focusSelector) { - color: var(--fg-color-do); + color: var(--kg-color-do); } .icon:has(+ .input:--disabledSelector) { diff --git a/src/lib/Layout/demoComponents/Cell.module.css b/src/lib/Layout/demoComponents/Cell.module.css index 81846924..d37e9592 100644 --- a/src/lib/Layout/demoComponents/Cell.module.css +++ b/src/lib/Layout/demoComponents/Cell.module.css @@ -1,8 +1,8 @@ .cell { align-items: center; - background: var(--fg-color-re); - border-radius: var(--fg-border-radius-300); - color: var(--fg-background-000); + background: var(--kg-color-re); + border-radius: var(--kg-border-radius-300); + color: var(--kg-background-000); display: flex; flex-direction: column; height: 64px; diff --git a/src/lib/Layout/demoComponents/ContainerFill.module.css b/src/lib/Layout/demoComponents/ContainerFill.module.css index a2ef3a36..2c403716 100644 --- a/src/lib/Layout/demoComponents/ContainerFill.module.css +++ b/src/lib/Layout/demoComponents/ContainerFill.module.css @@ -2,13 +2,13 @@ align-items: center; /* center items horizontally, in this case */ background-image: linear-gradient( 45deg, - var(--fg-color-la) 25%, - var(--fg-color-mi) 25%, - var(--fg-color-mi) 50%, - var(--fg-color-la) 50%, - var(--fg-color-la) 75%, - var(--fg-color-mi) 75%, - var(--fg-color-mi) 100% + var(--kg-color-la) 25%, + var(--kg-color-mi) 25%, + var(--kg-color-mi) 50%, + var(--kg-color-la) 50%, + var(--kg-color-la) 75%, + var(--kg-color-mi) 75%, + var(--kg-color-mi) 100% ); background-size: 56.57px 56.57px; display: flex; @@ -18,9 +18,9 @@ } .text { - background: var(--fg-background-000); - color: var(--fg-color-sol); - font-size: var(--fg-font-size-large); - font-weight: var(--fg-font-weight-bold); - padding: calc(var(--fg-size-unit) * 4); + background: var(--kg-background-000); + color: var(--kg-color-sol); + font-size: var(--kg-font-size-large); + font-weight: var(--kg-font-weight-bold); + padding: calc(var(--kg-size-unit) * 4); } diff --git a/src/lib/Layout/demoComponents/ElementFill.module.css b/src/lib/Layout/demoComponents/ElementFill.module.css index 9b8ec23b..753f66e5 100644 --- a/src/lib/Layout/demoComponents/ElementFill.module.css +++ b/src/lib/Layout/demoComponents/ElementFill.module.css @@ -1,19 +1,19 @@ .fill { - --color: var(--fg-color-do); + --color: var(--kg-color-do); align-items: center; /* center items horizontally, in this case */ background: color-mix(in srgb, var(--color) 20%, transparent); - border: var(--fg-border-width-200) dashed var(--color); + border: var(--kg-border-width-200) dashed var(--color); display: flex; flex-direction: column; /* make flex direction vertical */ flex-grow: 1; justify-content: center; /* center items vertically, in this case */ - margin: calc(var(--fg-size-unit) / 2); - padding: calc(var(--fg-size-unit) * 3) 0; + margin: calc(var(--kg-size-unit) / 2); + padding: calc(var(--kg-size-unit) * 3) 0; } .text { color: var(--color); - font-size: var(--fg-font-size-large); - font-weight: var(--fg-font-weight-bold); + font-size: var(--kg-font-size-large); + font-weight: var(--kg-font-weight-bold); } diff --git a/src/lib/Layout/demoComponents/LongContent.module.css b/src/lib/Layout/demoComponents/LongContent.module.css index 5776083c..d460456b 100644 --- a/src/lib/Layout/demoComponents/LongContent.module.css +++ b/src/lib/Layout/demoComponents/LongContent.module.css @@ -1,13 +1,13 @@ .long { align-items: center; /* center items horizontally, in this case */ background: color-mix(in srgb, rebeccapurple 20%, transparent); - border: var(--fg-border-width-200) dashed rebeccapurple; + border: var(--kg-border-width-200) dashed rebeccapurple; color: rebeccapurple; display: flex; flex-direction: column; /* make flex direction vertical */ flex-grow: 1; height: calc(100vh + 333px); justify-content: flex-start; /* center items vertically, in this case */ - margin: calc(var(--fg-size-unit) / 2); - padding: calc(var(--fg-size-unit) * 4); + margin: calc(var(--kg-size-unit) / 2); + padding: calc(var(--kg-size-unit) * 4); } diff --git a/src/lib/Menu/Menu.module.css b/src/lib/Menu/Menu.module.css index 5f37ea5e..2874fe73 100644 --- a/src/lib/Menu/Menu.module.css +++ b/src/lib/Menu/Menu.module.css @@ -5,24 +5,24 @@ } .provider { - font-family: var(--fg-font-family); + font-family: var(--kg-font-family); } .menu { - border-radius: var(--fg-border-radius-300); - box-shadow: var(--fg-shadow-100); + border-radius: var(--kg-border-radius-300); + box-shadow: var(--kg-shadow-100); box-sizing: border-box; overflow: hidden; padding: 0; } .bordered { - background: var(--fg-background-000); - border: var(--fg-border-width-300) solid var(--fg-color-do); + background: var(--kg-background-000); + border: var(--kg-border-width-300) solid var(--kg-color-do); } .plain { - background: var(--fg-color-do); + background: var(--kg-color-do); border: none; } diff --git a/src/lib/Navigation/Navigation.module.css b/src/lib/Navigation/Navigation.module.css index 3b351328..9fdfa937 100644 --- a/src/lib/Navigation/Navigation.module.css +++ b/src/lib/Navigation/Navigation.module.css @@ -2,30 +2,30 @@ .nav-panel { align-items: center; - background: var(--fg-color-do); + background: var(--kg-color-do); display: flex; flex-direction: row; justify-content: space-between; max-width: 100%; - padding: calc(var(--fg-size-unit) * 2) calc(var(--fg-size-unit) * 4); + padding: calc(var(--kg-size-unit) * 2) calc(var(--kg-size-unit) * 4); width: 100%; } .name { - color: var(--fg-background-000); + color: var(--kg-background-000); cursor: default; flex-shrink: 0; - font-size: var(--fg-font-size-h-4); - font-weight: var(--fg-font-weight-bolder); - text-shadow: var(--fg-text-shadow); + font-size: var(--kg-font-size-h-4); + font-weight: var(--kg-font-weight-bolder); + text-shadow: var(--kg-text-shadow); user-select: none; } /* List styles */ .nav-list { - --text-color: var(--fg-background-000); - --hover-color: var(--fg-color-re); + --text-color: var(--kg-background-000); + --hover-color: var(--kg-color-re); display: flex; flex-grow: 0; @@ -33,7 +33,7 @@ .vertical { flex-direction: column; - gap: var(--fg-size-unit); + gap: var(--kg-size-unit); height: 100%; & .shift { @@ -54,7 +54,7 @@ .horizontal { align-items: center; flex-direction: row; - gap: calc(var(--fg-size-unit) * 5); + gap: calc(var(--kg-size-unit) * 5); & .shift { margin-left: auto; @@ -69,17 +69,17 @@ /* Collapsible button styles */ .button-collapsible { - color: var(--fg-background-000); + color: var(--kg-background-000); cursor: pointer; -webkit-tap-highlight-color: transparent; &:hover { - color: var(--fg-background-100); + color: var(--kg-background-100); } } .icon-collapsible { - filter: drop-shadow(var(--fg-text-shadow)); + filter: drop-shadow(var(--kg-text-shadow)); } /* Link styles */ @@ -92,20 +92,20 @@ display: flex; flex-direction: row; font-size: 16px; - font-weight: var(--fg-font-weight-bolder); - gap: var(--fg-size-unit); - padding: calc(var(--fg-size-unit) / 2) 0; + font-weight: var(--kg-font-weight-bolder); + gap: var(--kg-size-unit); + padding: calc(var(--kg-size-unit) / 2) 0; position: relative; - text-shadow: var(--fg-text-shadow); + text-shadow: var(--kg-text-shadow); user-select: none; &:hover { --base-color: var(--hover-color); - text-shadow: 1px 1px 1px var(--fg-color-mi); + text-shadow: 1px 1px 1px var(--kg-color-mi); & .nav-link-icon { - filter: drop-shadow(1px 1px 1px var(--fg-color-mi)); + filter: drop-shadow(1px 1px 1px var(--kg-color-mi)); } } } @@ -115,7 +115,7 @@ } .nav-link-icon { - filter: drop-shadow(var(--fg-text-shadow)); - height: calc(var(--fg-size-unit) * 3); - width: calc(var(--fg-size-unit) * 3); + filter: drop-shadow(var(--kg-text-shadow)); + height: calc(var(--kg-size-unit) * 3); + width: calc(var(--kg-size-unit) * 3); } diff --git a/src/lib/Pagination/Pagination.module.css b/src/lib/Pagination/Pagination.module.css index 2d64e6c6..a3c70de2 100644 --- a/src/lib/Pagination/Pagination.module.css +++ b/src/lib/Pagination/Pagination.module.css @@ -16,44 +16,44 @@ .page-button { align-items: center; - background: var(--fg-color-sol); - border-radius: var(--fg-border-radius-200); + background: var(--kg-color-sol); + border-radius: var(--kg-border-radius-200); color: white; cursor: pointer; display: flex; flex-direction: row; - font-family: var(--fg-font-family-monospace); - font-size: var(--fg-font-size-small); - font-weight: var(--fg-font-weight-bold); + font-family: var(--kg-font-family-monospace); + font-size: var(--kg-font-size-small); + font-weight: var(--kg-font-weight-bold); height: 24px; justify-content: center; letter-spacing: 0.8px; min-width: 24px; padding: 0 6px; - transition: background-color var(--fg-time-sm) ease-in-out; + transition: background-color var(--kg-time-sm) ease-in-out; &:hover { - background: var(--fg-color-do); + background: var(--kg-color-do); } &:focus { - background: var(--fg-color-do); + background: var(--kg-color-do); } &.active { - background: var(--fg-color-do); + background: var(--kg-color-do); pointer-events: none; } } .ellipsis { align-items: center; - color: var(--fg-color-sol); + color: var(--kg-color-sol); cursor: default; display: flex; flex-direction: row; - font-size: var(--fg-font-size-large); - font-weight: var(--fg-font-weight-bold); + font-size: var(--kg-font-size-large); + font-weight: var(--kg-font-weight-bold); height: 24px; justify-content: center; user-select: none; @@ -80,27 +80,27 @@ .input { appearance: textfield; - background-color: var(--fg-color-mi); - border: var(--fg-border-width-200) solid var(--fg-color-mi); - border-radius: var(--fg-border-radius-300); + background-color: var(--kg-color-mi); + border: var(--kg-border-width-200) solid var(--kg-color-mi); + border-radius: var(--kg-border-radius-300); box-sizing: content-box; - color: var(--fg-text-color); + color: var(--kg-text-color); flex-grow: 0; - font-size: var(--fg-font-size-small); - padding: calc(var(--fg-size-unit) / 2) calc(var(--fg-size-unit) * 1); + font-size: var(--kg-font-size-small); + padding: calc(var(--kg-size-unit) / 2) calc(var(--kg-size-unit) * 1); text-align: center; transition: - background-color var(--fg-time-sm) ease-in-out, - border-color var(--fg-time-sm) ease-in-out; + background-color var(--kg-time-sm) ease-in-out, + border-color var(--kg-time-sm) ease-in-out; width: calc(var(--digits) * 1ch); &:focus { - background-color: var(--fg-background-000); - border-color: var(--fg-color-do); + background-color: var(--kg-background-000); + border-color: var(--kg-color-do); outline: none; &.error { - border-color: var(--fg-color-error); + border-color: var(--kg-color-error); } } @@ -113,23 +113,23 @@ cursor: pointer; & .icon { - transition: color var(--fg-time-sm) ease-in-out; + transition: color var(--kg-time-sm) ease-in-out; } &:hover .icon { - color: var(--fg-color-do); + color: var(--kg-color-do); } &:focus .icon { - color: var(--fg-color-do); + color: var(--kg-color-do); } &:disabled .icon { - color: var(--fg-background-100); + color: var(--kg-background-100); cursor: not-allowed; } } .icon { - color: var(--fg-color-sol); + color: var(--kg-color-sol); } diff --git a/src/lib/Picture/Picture.module.css b/src/lib/Picture/Picture.module.css index 44609ffa..9dc1601c 100644 --- a/src/lib/Picture/Picture.module.css +++ b/src/lib/Picture/Picture.module.css @@ -8,7 +8,7 @@ .picture { max-height: 100%; max-width: 100%; - transition: opacity var(--fg-time-sm) ease-in; + transition: opacity var(--kg-time-sm) ease-in; & img { display: block; diff --git a/src/lib/Progress/Progress.module.css b/src/lib/Progress/Progress.module.css index ed8d4b43..cc67a09c 100644 --- a/src/lib/Progress/Progress.module.css +++ b/src/lib/Progress/Progress.module.css @@ -2,12 +2,12 @@ align-items: center; display: flex; flex-direction: row; - gap: var(--fg-size-unit); + gap: var(--kg-size-unit); } .label { - color: var(--fg-color-sol); - font-weight: var(--fg-font-weight-bolder); + color: var(--kg-color-sol); + font-weight: var(--kg-font-weight-bolder); letter-spacing: 0.33px; } @@ -26,9 +26,9 @@ } .progress { - --color: var(--fg-color-re); - --background: var(--fg-color-mi); - --height: calc(var(--fg-size-unit) * 2); + --color: var(--kg-color-re); + --background: var(--kg-color-mi); + --height: calc(var(--kg-size-unit) * 2); appearance: none; background: var(--background); @@ -36,7 +36,7 @@ border-radius: calc(var(--height) / 2); height: var(--height); max-width: 100%; - width: calc(var(--fg-size-unit) * 33); + width: calc(var(--kg-size-unit) * 33); &.dashed { mask: diff --git a/src/lib/Provider/Provider.module.css b/src/lib/Provider/Provider.module.css index bb3d61e5..aec217d7 100644 --- a/src/lib/Provider/Provider.module.css +++ b/src/lib/Provider/Provider.module.css @@ -1,3 +1,3 @@ .provider { - font-family: var(--fg-font-family); + font-family: var(--kg-font-family); } diff --git a/src/lib/Select/Select.module.css b/src/lib/Select/Select.module.css index 5e69ef80..83002194 100644 --- a/src/lib/Select/Select.module.css +++ b/src/lib/Select/Select.module.css @@ -7,8 +7,8 @@ } .wrapper { - --gap: var(--fg-size-unit); - --validation-icon-placeholder: calc(var(--fg-size-unit) * 4 + var(--gap)); + --gap: var(--kg-size-unit); + --validation-icon-placeholder: calc(var(--kg-size-unit) * 4 + var(--gap)); align-items: center; display: flex; @@ -38,89 +38,89 @@ } .select { - background-color: var(--fg-color-mi); - border: var(--fg-border-width-300) solid var(--fg-color-mi); - border-radius: var(--fg-border-radius-300); - color: var(--fg-text-color); + background-color: var(--kg-color-mi); + border: var(--kg-border-width-300) solid var(--kg-color-mi); + border-radius: var(--kg-border-radius-300); + color: var(--kg-text-color); cursor: pointer; flex: 1; - font-size: var(--fg-font-size-medium); + font-size: var(--kg-font-size-medium); max-width: 100%; min-width: 0; overflow: hidden; - padding: var(--fg-size-unit) calc(var(--fg-size-unit) * 6) var(--fg-size-unit) - calc(var(--fg-size-unit) * 1.5); + padding: var(--kg-size-unit) calc(var(--kg-size-unit) * 6) var(--kg-size-unit) + calc(var(--kg-size-unit) * 1.5); text-overflow: ellipsis; transition: - background-color var(--fg-time-sm) ease-in-out, - border-color var(--fg-time-sm) ease-in-out; + background-color var(--kg-time-sm) ease-in-out, + border-color var(--kg-time-sm) ease-in-out; white-space: nowrap; width: var(--select-width); &:--multiple { - padding: var(--fg-size-unit) calc(var(--fg-size-unit) * 1.5); + padding: var(--kg-size-unit) calc(var(--kg-size-unit) * 1.5); & option { - padding-bottom: var(--fg-size-unit); - padding-top: var(--fg-size-unit); + padding-bottom: var(--kg-size-unit); + padding-top: var(--kg-size-unit); } } &:--disabledSelector { - background-color: var(--fg-background-100); - border-color: var(--fg-background-100); + background-color: var(--kg-background-100); + border-color: var(--kg-background-100); cursor: not-allowed; } &:--invalidSelector:focus { - background-color: var(--fg-background-000); - border-color: var(--fg-color-error); + background-color: var(--kg-background-000); + border-color: var(--kg-color-error); } &:not(:--multiple) { - padding: var(--fg-size-unit) calc(var(--fg-size-unit) * 6) var(--fg-size-unit) - calc(var(--fg-size-unit) * 1.5); + padding: var(--kg-size-unit) calc(var(--kg-size-unit) * 6) var(--kg-size-unit) + calc(var(--kg-size-unit) * 1.5); } &:--focusSelector { - background-color: var(--fg-background-000); - border-color: var(--fg-color-re); + background-color: var(--kg-background-000); + border-color: var(--kg-color-re); outline: none; } } .icon { - color: var(--fg-color-sol); - height: calc(var(--fg-size-unit) * 3); + color: var(--kg-color-sol); + height: calc(var(--kg-size-unit) * 3); pointer-events: none; position: absolute; - right: calc(var(--fg-size-unit) * 2); + right: calc(var(--kg-size-unit) * 2); top: 50%; transform: translate(0, -50%); - width: calc(var(--fg-size-unit) * 3); + width: calc(var(--kg-size-unit) * 3); } .select:--hoverSelector + .icon { - color: var(--fg-color-re); + color: var(--kg-color-re); } .prefix { - color: var(--fg-color-sol); + color: var(--kg-color-sol); cursor: pointer; flex-shrink: 0; - height: calc(var(--fg-size-unit) * 4); - width: calc(var(--fg-size-unit) * 4); + height: calc(var(--kg-size-unit) * 4); + width: calc(var(--kg-size-unit) * 4); & svg { color: inherit; height: inherit; - transition: color var(--fg-time-sm) ease-in-out; + transition: color var(--kg-time-sm) ease-in-out; width: inherit; } } .prefix:has(+ .icon-wrapper .select:--multiple) { - margin-top: var(--fg-size-unit); + margin-top: var(--kg-size-unit); } .prefix:has(+ .icon-wrapper .select:--disabledSelector) { @@ -128,19 +128,19 @@ } .prefix:has(+ .icon-wrapper .select:--focusSelector) { - color: var(--fg-color-do); + color: var(--kg-color-do); } .prefix:has(+ .icon-wrapper .select:--hoverSelector) { - color: var(--fg-color-re); + color: var(--kg-color-re); } .prefix:has(+ .icon-wrapper .select:--invalidSelector):hover { - color: var(--fg-color-error); + color: var(--kg-color-error); } .prefix:has(+ .icon-wrapper .select:--invalidSelector:hover) { - color: var(--fg-color-error); + color: var(--kg-color-error); } .validation { @@ -148,5 +148,5 @@ } .wrapper:has(.select:--multiple) .validation { - margin-top: var(--fg-size-unit); + margin-top: var(--kg-size-unit); } diff --git a/src/lib/Skeleton/Skeleton.module.css b/src/lib/Skeleton/Skeleton.module.css index 187a9c8f..3d2d82c7 100644 --- a/src/lib/Skeleton/Skeleton.module.css +++ b/src/lib/Skeleton/Skeleton.module.css @@ -6,13 +6,13 @@ .skeleton-frame { border-radius: calc(var(--border-radius) * 1px); - box-shadow: 0 0 calc(var(--fg-size-unit) * 2) 0 - color-mix(in srgb, var(--fg-color-sol) 22%, transparent); + box-shadow: 0 0 calc(var(--kg-size-unit) * 2) 0 + color-mix(in srgb, var(--kg-color-sol) 22%, transparent); height: var(--height); margin: calc(var(--margin-y) * 1px) calc(var(--margin-x) * 1px); max-height: 100%; max-width: 100%; - padding: calc(var(--fg-size-unit) * 3); + padding: calc(var(--kg-size-unit) * 3); width: var(--width); } @@ -23,9 +23,9 @@ } .skeleton-shape { - --loading-color: color-mix(in srgb, var(--fg-color-sol) 11%, transparent); + --loading-color: color-mix(in srgb, var(--kg-color-sol) 11%, transparent); - animation: var(--fg-time-xl) loading ease-in-out infinite; + animation: var(--kg-time-xl) loading ease-in-out infinite; background: linear-gradient( 100deg, rgb(255 255 255 / 0%) 40%, @@ -52,13 +52,13 @@ align-items: center; display: flex; flex-direction: row; - gap: calc(var(--fg-size-unit) * 4); + gap: calc(var(--kg-size-unit) * 4); justify-content: center; margin: calc(var(--margin-y) * 1px) calc(var(--margin-x) * 1px); } .skeleton-button { - width: calc(var(--fg-size-unit) * 60); + width: calc(var(--kg-size-unit) * 60); } .short-line { diff --git a/src/lib/Tabs/Tabs.module.css b/src/lib/Tabs/Tabs.module.css index e815bcd0..79a77681 100644 --- a/src/lib/Tabs/Tabs.module.css +++ b/src/lib/Tabs/Tabs.module.css @@ -1,7 +1,7 @@ .tabs { - --header-height: calc(var(--fg-size-unit) * 6); + --header-height: calc(var(--kg-size-unit) * 6); --width: 100%; - --border-size: calc(var(--fg-size-unit) / 2); + --border-size: calc(var(--kg-size-unit) / 2); max-width: 100%; position: relative; @@ -28,19 +28,19 @@ .overflow-indicator { align-items: center; - background: color-mix(in srgb, var(--fg-color-mi) 66%, transparent); + background: color-mix(in srgb, var(--kg-color-mi) 66%, transparent); display: flex; flex-direction: row; height: calc(var(--header-height) - var(--border-size)); justify-content: center; - padding: calc(var(--fg-size-unit) / 1) calc(var(--fg-size-unit) / 2); + padding: calc(var(--kg-size-unit) / 1) calc(var(--kg-size-unit) / 2); position: absolute; right: 0; top: 0; width: var(--header-height); & svg { - color: var(--fg-color-sol); + color: var(--kg-color-sol); } } @@ -49,40 +49,40 @@ } .content { - padding: calc(var(--fg-size-unit) * 2) calc(var(--fg-size-unit) * 3); + padding: calc(var(--kg-size-unit) * 2) calc(var(--kg-size-unit) * 3); } .button { align-items: center; - border-bottom: var(--border-size) solid var(--fg-color-sol); + border-bottom: var(--border-size) solid var(--kg-color-sol); box-sizing: border-box; - color: var(--fg-color-sol); + color: var(--kg-color-sol); cursor: pointer; display: flex; flex-direction: row; flex-grow: 1; flex-shrink: 0; - font-weight: var(--fg-font-weight-bolder); - gap: var(--fg-size-unit); + font-weight: var(--kg-font-weight-bolder); + gap: var(--kg-size-unit); height: var(--header-height); justify-content: center; - padding: 0 calc(var(--fg-size-unit) * 3); + padding: 0 calc(var(--kg-size-unit) * 3); user-select: none; &:hover { - color: var(--fg-color-do); + color: var(--kg-color-do); } &.selected { - border-color: var(--fg-color-do); + border-color: var(--kg-color-do); cursor: default; pointer-events: none; } } .icon { - height: calc(var(--fg-size-unit) * 3); - width: calc(var(--fg-size-unit) * 3); + height: calc(var(--kg-size-unit) * 3); + width: calc(var(--kg-size-unit) * 3); } .tab { diff --git a/src/lib/Text/Text.module.css b/src/lib/Text/Text.module.css index cad60957..02d46e33 100644 --- a/src/lib/Text/Text.module.css +++ b/src/lib/Text/Text.module.css @@ -1,7 +1,7 @@ /* stylelint-disable no-descending-specificity */ .text { - --bg-color: var(--fg-background-000); + --bg-color: var(--kg-background-000); background-color: var(--bg-color); width: 100%; @@ -9,143 +9,143 @@ .text h1, .header1 { - color: var(--fg-color-sol); - font-size: var(--fg-font-size-h-1); + color: var(--kg-color-sol); + font-size: var(--kg-font-size-h-1); font-weight: 600; &:not(:last-child) { - margin-bottom: calc(var(--fg-size-unit) * 3); + margin-bottom: calc(var(--kg-size-unit) * 3); } } .text h2, .header2 { - color: var(--fg-color-sol); - font-size: var(--fg-font-size-h-2); + color: var(--kg-color-sol); + font-size: var(--kg-font-size-h-2); font-weight: 600; &:not(:last-child) { - margin-bottom: calc(var(--fg-size-unit) * 3); + margin-bottom: calc(var(--kg-size-unit) * 3); } } .text h3, .header3 { - color: var(--fg-color-sol); - font-size: var(--fg-font-size-h-3); + color: var(--kg-color-sol); + font-size: var(--kg-font-size-h-3); font-weight: 600; &:not(:last-child) { - margin-bottom: calc(var(--fg-size-unit) * 3); + margin-bottom: calc(var(--kg-size-unit) * 3); } } .text h4, .header4 { - color: var(--fg-color-sol); - font-size: var(--fg-font-size-h-4); + color: var(--kg-color-sol); + font-size: var(--kg-font-size-h-4); font-weight: 600; &:not(:last-child) { - margin-bottom: calc(var(--fg-size-unit) * 2); + margin-bottom: calc(var(--kg-size-unit) * 2); } } .text h5, .header5 { - color: var(--fg-color-sol); - font-size: var(--fg-font-size-h-5); + color: var(--kg-color-sol); + font-size: var(--kg-font-size-h-5); font-weight: 600; &:not(:last-child) { - margin-bottom: calc(var(--fg-size-unit) * 2); + margin-bottom: calc(var(--kg-size-unit) * 2); } } .text h6, .header6 { - color: var(--fg-color-sol); - font-size: var(--fg-font-size-h-6); + color: var(--kg-color-sol); + font-size: var(--kg-font-size-h-6); font-weight: 600; &:not(:last-child) { - margin-bottom: calc(var(--fg-size-unit) * 2); + margin-bottom: calc(var(--kg-size-unit) * 2); } } .text p, .paragraph { - color: var(--fg-text-color); - font-size: var(--fg-font-size-text); + color: var(--kg-text-color); + font-size: var(--kg-font-size-text); line-height: 1.33; &:not(:last-child) { - margin-bottom: calc(var(--fg-size-unit) * 2); + margin-bottom: calc(var(--kg-size-unit) * 2); } } .text a, .link { - border-bottom: var(--fg-border-width-100) solid var(--fg-color-action); - color: var(--fg-color-action); - transition: border-color var(--fg-time-sm) ease-in-out; + border-bottom: var(--kg-border-width-100) solid var(--kg-color-action); + color: var(--kg-color-action); + transition: border-color var(--kg-time-sm) ease-in-out; &:hover { - border-bottom-color: var(--fg-color-do); + border-bottom-color: var(--kg-color-do); } } .text b, .bold { - color: var(--fg-text-color); + color: var(--kg-text-color); font-weight: 600; } .text strong, .strong { - color: var(--fg-color-re); + color: var(--kg-color-re); font-weight: 600; } .text i, .italic { - color: var(--fg-text-color); + color: var(--kg-text-color); font-style: italic; } .text em, .emphasized { - color: var(--fg-color-re); + color: var(--kg-color-re); font-style: italic; - font-weight: var(--fg-font-weight-bolder); + font-weight: var(--kg-font-weight-bolder); } .text mark, .marked { - background: var(--fg-color-mi); - color: var(--fg-text-color); - padding: 0 calc(var(--fg-size-unit) / 2); + background: var(--kg-color-mi); + color: var(--kg-text-color); + padding: 0 calc(var(--kg-size-unit) / 2); } .text small, .small { - color: var(--fg-text-color); + color: var(--kg-text-color); font-size: 12px; } .text del, .deleted { - background: var(--fg-color-error); - color: var(--fg-background-000); - padding: 0 calc(var(--fg-size-unit) / 2); - text-decoration: var(--fg-background-000) solid line-through var(--fg-border-width-200); + background: var(--kg-color-error); + color: var(--kg-background-000); + padding: 0 calc(var(--kg-size-unit) / 2); + text-decoration: var(--kg-background-000) solid line-through var(--kg-border-width-200); } .text ins, .inserted { - background: var(--fg-color-success); - color: var(--fg-background-000); - padding: 0 calc(var(--fg-size-unit) / 2); + background: var(--kg-color-success); + color: var(--kg-background-000); + padding: 0 calc(var(--kg-size-unit) / 2); &::before { content: ">"; @@ -158,15 +158,15 @@ .text sub, .subscript { - color: var(--fg-text-color); - font-size: var(--fg-font-size-extra-small); + color: var(--kg-text-color); + font-size: var(--kg-font-size-extra-small); vertical-align: sub; } .text sup, .superscript { - color: var(--fg-text-color); - font-size: var(--fg-font-size-extra-small); + color: var(--kg-text-color); + font-size: var(--kg-font-size-extra-small); vertical-align: super; } @@ -174,11 +174,11 @@ .text ol, .ul, .ol { - color: var(--fg-text-color); - padding-left: calc(var(--fg-size-unit) * 2); + color: var(--kg-text-color); + padding-left: calc(var(--kg-size-unit) * 2); &:not(:last-child) { - margin-bottom: calc(var(--fg-size-unit) * 2); + margin-bottom: calc(var(--kg-size-unit) * 2); } } @@ -189,18 +189,18 @@ display: flex; &:not(:last-child) { - margin-bottom: calc(var(--fg-size-unit) / 2); + margin-bottom: calc(var(--kg-size-unit) / 2); } } & li::before { align-self: center; - background-color: var(--fg-color-sol); - border-radius: var(--fg-border-radius-200); + background-color: var(--kg-color-sol); + border-radius: var(--kg-border-radius-200); content: " "; - height: var(--fg-size-unit); - margin-right: var(--fg-size-unit); - width: var(--fg-size-unit); + height: var(--kg-size-unit); + margin-right: var(--kg-size-unit); + width: var(--kg-size-unit); } } @@ -214,16 +214,16 @@ display: flex; &:not(:last-child) { - margin-bottom: calc(var(--fg-size-unit) / 2); + margin-bottom: calc(var(--kg-size-unit) / 2); } } & li::before { align-self: center; - color: var(--fg-color-sol); + color: var(--kg-color-sol); content: counter(li); direction: rtl; - font-size: var(--fg-font-size-small); + font-size: var(--kg-font-size-small); margin-left: -0.5em; margin-right: 6px; text-align: right; @@ -234,27 +234,27 @@ .blockquote, .text blockquote { - background: var(--fg-color-sol); - border-left: 3px solid var(--fg-color-sol); - border-radius: 0 var(--fg-border-radius-300) var(--fg-border-radius-300) 0; - color: var(--fg-color-mi); - font-size: var(--fg-font-size-large); + background: var(--kg-color-sol); + border-left: 3px solid var(--kg-color-sol); + border-radius: 0 var(--kg-border-radius-300) var(--kg-border-radius-300) 0; + color: var(--kg-color-mi); + font-size: var(--kg-font-size-large); font-style: italic; - margin-left: calc(var(--fg-size-unit) * 6); - padding: calc(var(--fg-size-unit) * 2) calc(var(--fg-size-unit) * 3); + margin-left: calc(var(--kg-size-unit) * 6); + padding: calc(var(--kg-size-unit) * 2) calc(var(--kg-size-unit) * 3); position: relative; &:not(:last-child) { - margin-bottom: calc(var(--fg-size-unit) * 2); + margin-bottom: calc(var(--kg-size-unit) * 2); } &::before { - color: var(--fg-color-do); + color: var(--kg-color-do); content: "“"; font-family: serif; font-size: 60px; font-style: normal; - font-weight: var(--fg-font-weight-bold); + font-weight: var(--kg-font-weight-bold); left: -42px; line-height: 1; position: absolute; @@ -263,8 +263,8 @@ & cite { display: block; - font-size: var(--fg-font-size-small); - margin-top: calc(var(--fg-size-unit) * 2); + font-size: var(--kg-font-size-small); + margin-top: calc(var(--kg-size-unit) * 2); text-align: right; } } @@ -272,39 +272,39 @@ .description-list, .text dl { &:not(:last-child) { - margin-bottom: calc(var(--fg-size-unit) * 2); + margin-bottom: calc(var(--kg-size-unit) * 2); } & dt { - color: var(--fg-color-do); - font-size: var(--fg-font-size-large); - font-weight: var(--fg-font-weight-bolder); - margin-bottom: calc(var(--fg-size-unit) * 1); + color: var(--kg-color-do); + font-size: var(--kg-font-size-large); + font-weight: var(--kg-font-weight-bolder); + margin-bottom: calc(var(--kg-size-unit) * 1); } & dd { - border-bottom: 1px solid var(--fg-color-sol); - margin-bottom: calc(var(--fg-size-unit) * 1); - padding-bottom: calc(var(--fg-size-unit) * 1); + border-bottom: 1px solid var(--kg-color-sol); + margin-bottom: calc(var(--kg-size-unit) * 1); + padding-bottom: calc(var(--kg-size-unit) * 1); } } .keyboard, .text kbd { - background-color: var(--fg-color-do); - border-color: var(--fg-color-mi) var(--fg-color-re) var(--fg-color-re) var(--fg-color-mi); + background-color: var(--kg-color-do); + border-color: var(--kg-color-mi) var(--kg-color-re) var(--kg-color-re) var(--kg-color-mi); border-radius: 3px; border-style: solid; border-width: 1px 3px 4px; - color: var(--fg-background-000); - font-family: var(--fg-font-family-monospace); - font-size: var(--fg-font-size-small); - font-weight: var(--fg-font-weight-bold); + color: var(--kg-background-000); + font-family: var(--kg-font-family-monospace); + font-size: var(--kg-font-size-small); + font-weight: var(--kg-font-weight-bold); letter-spacing: 1px; margin: 0; outline: 0; padding: 0 5px; - text-shadow: 1px 1px 0 var(--fg-background-400); + text-shadow: 1px 1px 0 var(--kg-background-400); vertical-align: baseline; } @@ -316,108 +316,108 @@ .table, .text table { - border: var(--fg-border-width-200) solid var(--fg-background-000); + border: var(--kg-border-width-200) solid var(--kg-background-000); border-collapse: collapse; - color: var(--fg-text-color); - font-size: var(--fg-font-size-small); + color: var(--kg-text-color); + font-size: var(--kg-font-size-small); table-layout: auto; width: 100%; &:not(:last-child) { - margin-bottom: calc(var(--fg-size-unit) * 2); + margin-bottom: calc(var(--kg-size-unit) * 2); } & > tr:hover td, & > *:not(tfoot) tr:hover td { - background-color: var(--fg-color-la); + background-color: var(--kg-color-la); } & th, & td { - border: var(--fg-border-width-100) solid var(--fg-background-100); - color: var(--fg-text-color); + border: var(--kg-border-width-100) solid var(--kg-background-100); + color: var(--kg-text-color); min-width: 166px; padding: 12px; - transition: background-color var(--fg-time-sm) ease-in-out; + transition: background-color var(--kg-time-sm) ease-in-out; } & th { - background: var(--fg-color-re); - color: var(--fg-background-000); - font-weight: var(--fg-font-weight-bolder); + background: var(--kg-color-re); + color: var(--kg-background-000); + font-weight: var(--kg-font-weight-bolder); letter-spacing: 0.3px; &:first-of-type { - border-radius: var(--fg-border-radius-500) 0 0 0; + border-radius: var(--kg-border-radius-500) 0 0 0; } &:last-of-type { - border-radius: 0 var(--fg-border-radius-500) 0 0; + border-radius: 0 var(--kg-border-radius-500) 0 0; } } & td { - background: var(--fg-background-000); + background: var(--kg-background-000); } & tfoot td { - background: var(--fg-color-sol); - color: var(--fg-background-000); - font-weight: var(--fg-font-weight-bold); + background: var(--kg-color-sol); + color: var(--kg-background-000); + font-weight: var(--kg-font-weight-bold); letter-spacing: 0.3px; &:first-of-type { - border-radius: 0 0 0 var(--fg-border-radius-500); + border-radius: 0 0 0 var(--kg-border-radius-500); } &:last-of-type { - border-radius: 0 0 var(--fg-border-radius-500) 0; + border-radius: 0 0 var(--kg-border-radius-500) 0; } } & caption { - font-size: var(--fg-font-size-large); + font-size: var(--kg-font-size-large); padding: 12px 0; } } .code, .text code { - background-color: var(--fg-background-100); - color: var(--fg-text-color); - font-family: var(--fg-font-family-monospace); - font-size: var(--fg-font-size-small); + background-color: var(--kg-background-100); + color: var(--kg-text-color); + font-family: var(--kg-font-family-monospace); + font-size: var(--kg-font-size-small); padding: 0 3px; } .preformatted, .text pre { - background-color: var(--fg-background-100); - border-radius: var(--fg-size-unit); - color: var(--fg-text-color); + background-color: var(--kg-background-100); + border-radius: var(--kg-size-unit); + color: var(--kg-text-color); display: block; - font-family: var(--fg-font-family); - font-size: var(--fg-font-size-small); + font-family: var(--kg-font-family); + font-size: var(--kg-font-size-small); line-height: 1.5; max-width: 100%; overflow: auto; - padding: calc(var(--fg-size-unit) * 2) calc(var(--fg-size-unit) * 3) - calc(var(--fg-size-unit) * 2) calc(var(--fg-size-unit) * 12); + padding: calc(var(--kg-size-unit) * 2) calc(var(--kg-size-unit) * 3) + calc(var(--kg-size-unit) * 2) calc(var(--kg-size-unit) * 12); position: relative; white-space: pre; &:not(:last-child) { - margin-bottom: calc(var(--fg-size-unit) * 2); + margin-bottom: calc(var(--kg-size-unit) * 2); } &::before { - border-right: 3px solid var(--fg-color-do); + border-right: 3px solid var(--kg-color-do); bottom: 0; - color: var(--fg-color-re); + color: var(--kg-color-re); content: "{x}"; font-size: 36px; font-style: normal; - font-weight: var(--fg-font-weight-normal); + font-weight: var(--kg-font-weight-normal); left: 6px; line-height: 1; padding-left: 6px; @@ -430,26 +430,26 @@ .meter, .text meter { - --background: var(--fg-background-100); - --optimum: var(--fg-color-success); - --sub-optimum: var(--fg-color-warning); - --sub-sub-optimum: var(--fg-color-error); - --height: calc(var(--fg-size-unit) * 2); - --border-radius: var(--fg-size-unit); - --border-color: var(--fg-color-re); + --background: var(--kg-background-100); + --optimum: var(--kg-color-success); + --sub-optimum: var(--kg-color-warning); + --sub-sub-optimum: var(--kg-color-error); + --height: calc(var(--kg-size-unit) * 2); + --border-radius: var(--kg-size-unit); + --border-color: var(--kg-color-re); /* Style for Firefox */ background: var(--background); - border: var(--fg-border-width-100) solid var(--border-color); + border: var(--kg-border-width-100) solid var(--border-color); border-radius: var(--border-radius); display: inline-block; height: var(--height); - width: calc(var(--fg-size-unit) * 25); + width: calc(var(--kg-size-unit) * 25); /* Style for Chrome, etc. */ &::-webkit-meter-bar { background: var(--background); - border: var(--fg-border-width-100) solid var(--border-color); + border: var(--kg-border-width-100) solid var(--border-color); border-radius: var(--border-radius); height: var(--height); } @@ -475,6 +475,6 @@ .strike-through, .text s { - color: var(--fg-background-400); - text-decoration: var(--fg-text-color) solid line-through var(--fg-border-width-200); + color: var(--kg-background-400); + text-decoration: var(--kg-text-color) solid line-through var(--kg-border-width-200); } diff --git a/src/lib/Textarea/Textarea.module.css b/src/lib/Textarea/Textarea.module.css index 5d1b53ca..8488cedd 100644 --- a/src/lib/Textarea/Textarea.module.css +++ b/src/lib/Textarea/Textarea.module.css @@ -5,8 +5,8 @@ } .wrapper { - --gap: var(--fg-size-unit); - --validation-icon-placeholder: calc(var(--fg-size-unit) * 4 + var(--gap)); + --gap: var(--kg-size-unit); + --validation-icon-placeholder: calc(var(--kg-size-unit) * 4 + var(--gap)); align-items: flex-start; display: flex; @@ -22,48 +22,48 @@ } .textarea { - background-color: var(--fg-color-mi); - border: var(--fg-border-width-300) solid var(--fg-color-mi); - border-radius: var(--fg-border-radius-300); - color: var(--fg-text-color); + background-color: var(--kg-color-mi); + border: var(--kg-border-width-300) solid var(--kg-color-mi); + border-radius: var(--kg-border-radius-300); + color: var(--kg-text-color); flex: 1; - font-size: var(--fg-font-size-small); + font-size: var(--kg-font-size-small); line-height: 1.5; min-width: 0; - padding: calc(var(--fg-size-unit) * 1) calc(var(--fg-size-unit) * 2); + padding: calc(var(--kg-size-unit) * 1) calc(var(--kg-size-unit) * 2); resize: var(--resize); transition: - background-color var(--fg-time-sm) ease-in-out, - border-color var(--fg-time-sm) ease-in-out; + background-color var(--kg-time-sm) ease-in-out, + border-color var(--kg-time-sm) ease-in-out; &:last-child { margin-right: var(--validation-icon-placeholder); } &:--focusSelector { - background-color: var(--fg-background-000); - border-color: var(--fg-color-re); + background-color: var(--kg-background-000); + border-color: var(--kg-color-re); outline: none; } &:--invalidSelector:focus { - background-color: var(--fg-background-000); - border-color: var(--fg-color-error); + background-color: var(--kg-background-000); + border-color: var(--kg-color-error); } &::placeholder { - color: var(--fg-color-sol); + color: var(--kg-color-sol); opacity: 0.66; } &:--readOnlySelector { - background-color: var(--fg-color-mi); - border: var(--fg-border-width-300) solid var(--fg-color-do); + background-color: var(--kg-color-mi); + border: var(--kg-border-width-300) solid var(--kg-color-do); } &:--disabledSelector { - background-color: var(--fg-background-100); - border-color: var(--fg-background-100); + background-color: var(--kg-background-100); + border-color: var(--kg-background-100); cursor: not-allowed; } @@ -73,40 +73,40 @@ } .prefix { - color: var(--fg-color-sol); + color: var(--kg-color-sol); cursor: pointer; flex-shrink: 0; - height: calc(var(--fg-size-unit) * 4); - margin-top: var(--fg-size-unit); - width: calc(var(--fg-size-unit) * 4); + height: calc(var(--kg-size-unit) * 4); + margin-top: var(--kg-size-unit); + width: calc(var(--kg-size-unit) * 4); & svg { color: inherit; height: inherit; transition: - background-color var(--fg-time-sm) ease-in-out, - border-color var(--fg-time-sm) ease-in-out; + background-color var(--kg-time-sm) ease-in-out, + border-color var(--kg-time-sm) ease-in-out; width: inherit; } &:hover { - color: var(--fg-color-re); + color: var(--kg-color-re); } } .prefix:has(+ .textarea:--invalidSelector):hover, .prefix:has(+ .textarea:--invalidSelector:focus) { - color: var(--fg-color-error); + color: var(--kg-color-error); } .prefix:has(+ .textarea:--focusSelector) { - color: var(--fg-color-do); + color: var(--kg-color-do); } .prefix:has(+ .textarea:--hoverSelector) { - color: var(--fg-color-re); + color: var(--kg-color-re); } .validation { - margin-top: var(--fg-size-unit); + margin-top: var(--kg-size-unit); } diff --git a/src/lib/Theme/PublicThemeType.ts b/src/lib/Theme/PublicThemeType.ts index 0d4325c1..638a2d82 100644 --- a/src/lib/Theme/PublicThemeType.ts +++ b/src/lib/Theme/PublicThemeType.ts @@ -4,128 +4,128 @@ export type PublicThemeType = { /** * Main font used by most components of library */ - fontFamily: ThemeType['fontFamily']; + fontFamily?: ThemeType['fontFamily']; /** * Monospaced font used by and 
      */
-    fontFamilyMonospace: ThemeType['fontFamilyMonospace'];
+    fontFamilyMonospace?: ThemeType['fontFamilyMonospace'];
     /**
      * Font size for H1 element
      */
-    fontSizeH1: ThemeType['fontSizeH1'];
+    fontSizeH1?: ThemeType['fontSizeH1'];
     /**
      * Font size for H2 element
      */
-    fontSizeH2: ThemeType['fontSizeH2'];
+    fontSizeH2?: ThemeType['fontSizeH2'];
     /**
      * Font size for H3 element
      */
-    fontSizeH3: ThemeType['fontSizeH3'];
+    fontSizeH3?: ThemeType['fontSizeH3'];
     /**
      * Font size for H4 element
      */
-    fontSizeH4: ThemeType['fontSizeH4'];
+    fontSizeH4?: ThemeType['fontSizeH4'];
     /**
      * Font size for H5 element
      */
-    fontSizeH5: ThemeType['fontSizeH5'];
+    fontSizeH5?: ThemeType['fontSizeH5'];
     /**
      * Font size for H6 element
      */
-    fontSizeH6: ThemeType['fontSizeH6'];
+    fontSizeH6?: ThemeType['fontSizeH6'];
     /**
      * Arbitrary text font size. Used by P element. Expected to be most readable
      */
-    fontSizeText: ThemeType['fontSizeText'];
+    fontSizeText?: ThemeType['fontSizeText'];
     /**
      * Medium font size
      */
-    fontSizeMedium: ThemeType['fontSizeMedium'];
+    fontSizeMedium?: ThemeType['fontSizeMedium'];
     /**
      * Large font size
      */
-    fontSizeLarge: ThemeType['fontSizeLarge'];
+    fontSizeLarge?: ThemeType['fontSizeLarge'];
     /**
      * Small font size
      */
-    fontSizeSmall: ThemeType['fontSizeSmall'];
+    fontSizeSmall?: ThemeType['fontSizeSmall'];
     /**
      * Default font weight. Expected to be most readable
      */
-    fontWeightNormal: ThemeType['fontWeightNormal'];
+    fontWeightNormal?: ThemeType['fontWeightNormal'];
     /**
      * Bolder font weight. Expected to look outstanding comparing to normal
      */
-    fontWeightBolder: ThemeType['fontWeightBolder'];
+    fontWeightBolder?: ThemeType['fontWeightBolder'];
     /**
      * Bold font weight. Expected to look outstanding comparing to bolder
      */
-    fontWeightBold: ThemeType['fontWeightBold'];
+    fontWeightBold?: ThemeType['fontWeightBold'];
     /**
      * Default text color. Expected to be most readable
      */
-    textColor: ThemeType['textColor'];
+    textColor?: ThemeType['textColor'];
     /**
      * Lowest background level. E.g. paper color
      */
-    background000: ThemeType['background000'];
+    background000?: ThemeType['background000'];
     /**
      * 100 background level. Good for delicate borders
      */
-    background100: ThemeType['background100'];
-    background200: ThemeType['background200'];
-    background300: ThemeType['background300'];
-    background400: ThemeType['background400'];
+    background100?: ThemeType['background100'];
+    background200?: ThemeType['background200'];
+    background300?: ThemeType['background300'];
+    background400?: ThemeType['background400'];
     /**
      * 500 background level. Good for strong headers
      */
-    background500: ThemeType['background500'];
+    background500?: ThemeType['background500'];
     /**
      * Highest background level. E.g. text color
      */
-    background600: ThemeType['background600'];
+    background600?: ThemeType['background600'];
     /**
      * First brand color. It is most visible in the theme.
      * Has to make a good contrast with background000 and background600
      */
-    colorDo: ThemeType['colorDo'];
+    colorDo?: ThemeType['colorDo'];
     /**
      * Second brand color. Darkest one. Has to make a good contrast with background000 and colorDo
      */
-    colorRe: ThemeType['colorRe'];
+    colorRe?: ThemeType['colorRe'];
     /**
      * Third brand color. Lightest one. Has to make a good contrast with background600 and colorDo
      */
-    colorMi: ThemeType['colorMi'];
+    colorMi?: ThemeType['colorMi'];
     /**
      * First alternative brand color. Used when needed to create an accented contrast with colorDo.
      * Has to make a good contrast with background000 and background600
      */
-    colorFa: ThemeType['colorFa'];
+    colorFa?: ThemeType['colorFa'];
     /**
      * Second alternative brand color. Darkest one.
      * Has to make a good contrast with background000 and colorFa
      */
-    colorSol: ThemeType['colorSol'];
+    colorSol?: ThemeType['colorSol'];
     /**
      * Third alternative brand color. Lightest one.
      * Has to make a good contrast with background600 and colorFa
      */
-    colorLa: ThemeType['colorLa'];
+    colorLa?: ThemeType['colorLa'];
     /**
      * Error/danger/failure indication color. Has to make a good contrast with background600 and background000
      */
-    colorError: ThemeType['colorError'];
+    colorError?: ThemeType['colorError'];
     /**
      * Warning indication color. Has to make a good contrast with background600 and background000
      */
-    colorWarning: ThemeType['colorWarning'];
+    colorWarning?: ThemeType['colorWarning'];
     /**
      * Success/approve/agree indication color. Has to make a good contrast with background600 and background000
      */
-    colorSuccess: ThemeType['colorSuccess'];
+    colorSuccess?: ThemeType['colorSuccess'];
     /**
      * Action/link indication color. Has to make a good contrast with background600 and background000
      */
-    colorAction: ThemeType['colorAction'];
+    colorAction?: ThemeType['colorAction'];
 };
diff --git a/src/lib/Theme/theme.ts b/src/lib/Theme/theme.ts
index 3cc4ebf1..53f8020f 100644
--- a/src/lib/Theme/theme.ts
+++ b/src/lib/Theme/theme.ts
@@ -43,10 +43,10 @@ export const theme = {
     colorSuccess: '#3c9d74',
     colorAction: '#2100FF',
     // shadow config
-    shadowColor: 'color-mix(in srgb, var(--fg-background-600) 11%, transparent)',
-    shadow050: '3px 3px 3px 0 var(--fg-shadow-color)',
-    shadow100: '6px 6px 3px 0 var(--fg-shadow-color)',
-    shadow200: '9px 9px 3px 0 var(--fg-shadow-color)',
+    shadowColor: 'color-mix(in srgb, var(--kg-background-600) 11%, transparent)',
+    shadow050: '3px 3px 3px 0 var(--kg-shadow-color)',
+    shadow100: '6px 6px 3px 0 var(--kg-shadow-color)',
+    shadow200: '9px 9px 3px 0 var(--kg-shadow-color)',
     textShadow: '1px 1px 1px rgb(0 0 0 / 66%)',
     // border radii
     borderRadius100: '2px',
diff --git a/src/lib/Toast/Toast.module.css b/src/lib/Toast/Toast.module.css
index 68b3fb4c..dcf32309 100644
--- a/src/lib/Toast/Toast.module.css
+++ b/src/lib/Toast/Toast.module.css
@@ -28,33 +28,33 @@
 }
 
 .toast {
-    --main-color: var(--fg-color-do);
+    --main-color: var(--kg-color-do);
 
-    background: var(--fg-background-000);
-    border: var(--fg-border-width-300) solid var(--main-color);
-    border-radius: var(--fg-border-radius-300);
-    bottom: calc(var(--fg-size-unit) * 6);
-    box-shadow: var(--fg-shadow-100);
+    background: var(--kg-background-000);
+    border: var(--kg-border-width-300) solid var(--main-color);
+    border-radius: var(--kg-border-radius-300);
+    bottom: calc(var(--kg-size-unit) * 6);
+    box-shadow: var(--kg-shadow-100);
     left: 50%;
-    max-width: calc(var(--fg-size-unit) * 55);
-    min-width: calc(var(--fg-size-unit) * 39);
+    max-width: calc(var(--kg-size-unit) * 55);
+    min-width: calc(var(--kg-size-unit) * 39);
     position: fixed;
 
     &.success {
-        --main-color: var(--fg-color-success);
+        --main-color: var(--kg-color-success);
     }
 
     &.error {
-        --main-color: var(--fg-color-error);
+        --main-color: var(--kg-color-error);
     }
 
     &.warning {
-        --main-color: var(--fg-color-warning);
+        --main-color: var(--kg-color-warning);
     }
 }
 
 .enter-active {
-    animation: slide-in-bottom var(--fg-time-sm) cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+    animation: slide-in-bottom var(--kg-time-sm) cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
 }
 
 .exit-active {
@@ -62,22 +62,22 @@
 }
 
 .title {
-    color: var(--fg-color-sol);
-    font-size: var(--fg-font-size-large);
-    font-weight: var(--fg-font-weight-bolder);
+    color: var(--kg-color-sol);
+    font-size: var(--kg-font-size-large);
+    font-weight: var(--kg-font-weight-bolder);
 
     &:not(:last-child) {
-        margin-bottom: var(--fg-size-unit);
+        margin-bottom: var(--kg-size-unit);
     }
 }
 
 .content {
     align-items: center;
-    color: var(--fg-text-color);
+    color: var(--kg-text-color);
     display: flex;
     flex-direction: row;
-    gap: calc(var(--fg-size-unit) * 2);
-    padding: calc(var(--fg-size-unit) * 2);
+    gap: calc(var(--kg-size-unit) * 2);
+    padding: calc(var(--kg-size-unit) * 2);
 }
 
 .left {
@@ -88,17 +88,17 @@
 
 .icon {
     color: var(--main-color);
-    height: calc(var(--fg-size-unit) * 6);
-    width: calc(var(--fg-size-unit) * 6);
+    height: calc(var(--kg-size-unit) * 6);
+    width: calc(var(--kg-size-unit) * 6);
 }
 
 .body {
-    font-size: var(--fg-font-size-small);
+    font-size: var(--kg-font-size-small);
     line-height: 1.2;
 }
 
 .provider {
-    font-family: var(--fg-font-family);
+    font-family: var(--kg-font-family);
 }
 
 /* Actions */
@@ -115,9 +115,9 @@
 }
 
 .action-button {
-    --icon-size: calc(var(--fg-size-unit) * 3);
+    --icon-size: calc(var(--kg-size-unit) * 3);
 
-    font-size: var(--fg-font-size-small);
-    font-weight: var(--fg-font-weight-bolder);
-    padding: var(--fg-size-unit);
+    font-size: var(--kg-font-size-small);
+    font-weight: var(--kg-font-weight-bolder);
+    padding: var(--kg-size-unit);
 }
diff --git a/src/lib/Tooltip/Tooltip.module.css b/src/lib/Tooltip/Tooltip.module.css
index a6696395..9249c2f2 100644
--- a/src/lib/Tooltip/Tooltip.module.css
+++ b/src/lib/Tooltip/Tooltip.module.css
@@ -9,27 +9,27 @@
 }
 
 .provider {
-    font-family: var(--fg-font-family);
+    font-family: var(--kg-font-family);
 }
 
 .tooltip {
-    --bg-color: var(--fg-color-do);
+    --bg-color: var(--kg-color-do);
 
-    background: var(--fg-background-000);
-    border: var(--fg-border-width-300) solid var(--bg-color);
-    border-radius: var(--fg-border-radius-300);
-    box-shadow: var(--fg-shadow-100);
+    background: var(--kg-background-000);
+    border: var(--kg-border-width-300) solid var(--bg-color);
+    border-radius: var(--kg-border-radius-300);
+    box-shadow: var(--kg-shadow-100);
     box-sizing: border-box;
-    min-width: calc(var(--fg-size-unit) * 24);
-    padding: calc(var(--fg-size-unit) * 2);
+    min-width: calc(var(--kg-size-unit) * 24);
+    padding: calc(var(--kg-size-unit) * 2);
 }
 
 .arrow {
-    --size: calc((var(--fg-size-unit) * 3));
+    --size: calc((var(--kg-size-unit) * 3));
     --left: auto;
     --top: auto;
 
-    background: var(--fg-background-000);
+    background: var(--kg-background-000);
     border-bottom: inherit;
     border-right: inherit;
     height: var(--size);
@@ -37,7 +37,7 @@
     width: var(--size);
 
     &.top {
-        box-shadow: var(--fg-shadow-050);
+        box-shadow: var(--kg-shadow-050);
         left: calc(var(--left) * 1px);
         top: calc(100% - (var(--size) / 2) - 1px);
         transform: rotate(45deg);
@@ -50,7 +50,7 @@
     }
 
     &.left {
-        box-shadow: var(--fg-shadow-050);
+        box-shadow: var(--kg-shadow-050);
         left: calc(100% - (var(--size) / 2) - 1px);
         top: calc(var(--top) * 1px);
         transform: rotate(315deg);