Skip to content

Commit

Permalink
fix(css): rename global CSS variable prefix to reflect new library name
Browse files Browse the repository at this point in the history 
fix #340
  • Loading branch information
@morewings
morewings committed Jun 30, 2024
1 parent 8e441fc commit 3a90fbb
Show file tree
Hide file tree
Showing 46 changed files with 851 additions and 851 deletions.
34 changes: 17 additions & 17 deletions src/internal/Actions/ActionButton.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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) {
Expand All @@ -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);
}

Expand Down
20 changes: 10 additions & 10 deletions src/internal/Actions/Actions.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}
10 changes: 5 additions & 5 deletions src/internal/Icons/Icon.module.css
View file
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -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);
}
24 changes: 12 additions & 12 deletions src/internal/Transitions/Transitions.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
Expand All @@ -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;
}
}
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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);
}

Expand All @@ -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 {
Expand Down Expand Up @@ -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);
}

Expand All @@ -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 {
Expand Down
2 changes: 1 addition & 1 deletion src/internal/utils/convertThemeVarName.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import type {ThemeType} from '@/lib';

export const convertThemeVarName = (str: string) =>
`fg-${str
`kg-${str
// camelToKebabCase
.replace(/(?<![A-Z])[A-Z]/g, (letter: string) => `-${letter.toLowerCase()}`)
// split numbers
Expand Down
44 changes: 22 additions & 22 deletions src/lib/Breadcrumbs/Breadcrumbs.module.css
View file
Original file line number Diff line number Diff line change
@@ -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;
}
Expand All @@ -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);
}
}
Loading

0 comments on commit 3a90fbb

Please sign in to comment.