From 5259f919f46047327fdd15fd6b535d6d99163041 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Denis=20=F0=9F=8E=83=20Khripkov?= Date: Sun, 15 Dec 2024 01:05:20 +0300 Subject: [PATCH 1/3] feat(button): make common styles colors - base-button; --- .changeset/rare-donuts-vanish.md | 5 +++ .../src/components/base-button/Component.tsx | 4 +- .../base-button/colors.common.module.css | 43 +++++++++++++++++++ ...t.module.css => colors.default.module.css} | 15 +------ ....module.css => colors.inverted.module.css} | 17 ++------ 5 files changed, 54 insertions(+), 30 deletions(-) create mode 100644 .changeset/rare-donuts-vanish.md create mode 100644 packages/button/src/components/base-button/colors.common.module.css rename packages/button/src/components/base-button/{default.module.css => colors.default.module.css} (93%) rename packages/button/src/components/base-button/{inverted.module.css => colors.inverted.module.css} (93%) diff --git a/.changeset/rare-donuts-vanish.md b/.changeset/rare-donuts-vanish.md new file mode 100644 index 0000000000..0f2a3e9867 --- /dev/null +++ b/.changeset/rare-donuts-vanish.md @@ -0,0 +1,5 @@ +--- +'@alfalab/core-components-button': patch +--- + + - Вынос общих стилей цветов button/base-button diff --git a/packages/button/src/components/base-button/Component.tsx b/packages/button/src/components/base-button/Component.tsx index c5b2f533d5..94c90458df 100644 --- a/packages/button/src/components/base-button/Component.tsx +++ b/packages/button/src/components/base-button/Component.tsx @@ -15,9 +15,9 @@ import { useFocus } from '@alfalab/hooks'; import { CommonButtonProps, ComponentProps, PrivateButtonProps } from '../../typings'; -import defaultColors from './default.module.css'; +import defaultColors from './colors.default.module.css'; import commonStyles from './index.module.css'; -import invertedColors from './inverted.module.css'; +import invertedColors from './colors.inverted.module.css'; const colorStyles = { default: defaultColors, diff --git a/packages/button/src/components/base-button/colors.common.module.css b/packages/button/src/components/base-button/colors.common.module.css new file mode 100644 index 0000000000..0dd37f480c --- /dev/null +++ b/packages/button/src/components/base-button/colors.common.module.css @@ -0,0 +1,43 @@ +@import '../../vars.css'; + +.accent { + border: 1px solid transparent; +} + +.primary { + border: 1px solid transparent; +} + +.filled { + border: 1px solid transparent; +} + +.transparent { + background-color: transparent; + border: 1px solid transparent; +} + +.link { + background-color: transparent; + border: 1px solid transparent; +} + +.text { + background-color: transparent; +} + +.ghost { + background-color: transparent; +} + +/* Disabled */ + +.component[disabled] { + &.transparent { + background-color: transparent; + } + + &.link { + background-color: transparent; + } +} diff --git a/packages/button/src/components/base-button/default.module.css b/packages/button/src/components/base-button/colors.default.module.css similarity index 93% rename from packages/button/src/components/base-button/default.module.css rename to packages/button/src/components/base-button/colors.default.module.css index c639f2c320..98cf4d7013 100644 --- a/packages/button/src/components/base-button/default.module.css +++ b/packages/button/src/components/base-button/colors.default.module.css @@ -1,9 +1,9 @@ @import '../../vars.css'; +@import 'colors.common.module.css'; .accent { color: var(--button-accent-color); background-color: var(--button-accent-base-bg-color); - border: 1px solid transparent; @media (hover: hover) { &:hover { @@ -21,8 +21,6 @@ } .primary { - border: 1px solid transparent; - & .hint { color: var(--button-primary-hint-color); } @@ -94,7 +92,6 @@ .filled { color: var(--color-light-text-primary); background-color: var(--color-light-neutral-translucent-300); - border: 1px solid transparent; @media (hover: hover) { &:hover { @@ -113,8 +110,6 @@ .transparent { color: var(--button-transparent-base-color); - background-color: transparent; - border: 1px solid transparent; @media (hover: hover) { &:hover { @@ -137,8 +132,6 @@ .link { color: var(--button-link-base-color); - background-color: transparent; - border: 1px solid transparent; @media (hover: hover) { &:hover { @@ -156,7 +149,6 @@ } .text { - background-color: transparent; color: var(--button-text-base-color); @media (hover: hover) { @@ -175,7 +167,6 @@ } .ghost { - background-color: transparent; color: var(--button-ghost-base-color); @media (hover: hover) { @@ -240,16 +231,12 @@ } &.transparent { - background-color: transparent; - &.loading { color: var(--button-transparent-base-color); } } &.link { - background-color: transparent; - &.loading { color: var(--button-link-base-color); } diff --git a/packages/button/src/components/base-button/inverted.module.css b/packages/button/src/components/base-button/colors.inverted.module.css similarity index 93% rename from packages/button/src/components/base-button/inverted.module.css rename to packages/button/src/components/base-button/colors.inverted.module.css index 46d41dc71e..afaa4e89d5 100644 --- a/packages/button/src/components/base-button/inverted.module.css +++ b/packages/button/src/components/base-button/colors.inverted.module.css @@ -1,9 +1,9 @@ @import '../../vars.css'; +@import 'colors.common.module.css'; .accent { color: var(--button-inverted-accent-color); background-color: var(--button-inverted-accent-base-bg-color); - border: 1px solid transparent; @media (hover: hover) { &:hover { @@ -21,8 +21,6 @@ } .primary { - border: 1px solid transparent; - & .hint { color: var(--button-inverted-primary-hint-color); } @@ -94,7 +92,6 @@ .filled { color: var(--color-light-text-primary-inverted); background-color: var(--color-light-neutral-translucent-300-inverted); - border: 1px solid transparent; @media (hover: hover) { &:hover { @@ -113,8 +110,6 @@ .transparent { color: var(--button-inverted-transparent-base-color); - background-color: transparent; - border: 1px solid transparent; @media (hover: hover) { &:hover { @@ -137,8 +132,6 @@ .link { color: var(--button-inverted-link-base-color); - background-color: transparent; - border: 1px solid transparent; @media (hover: hover) { &:hover { @@ -157,7 +150,6 @@ } .text { - background-color: transparent; color: var(--button-inverted-text-base-color); @media (hover: hover) { @@ -176,7 +168,6 @@ } .ghost { - background-color: transparent; color: var(--button-inverted-ghost-base-color); @media (hover: hover) { @@ -190,6 +181,8 @@ } } +/* Disabled */ + .component[disabled] { &.accent { color: var(--button-inverted-accent-disabled-color); @@ -237,16 +230,12 @@ } &.transparent { - background-color: transparent; - &.loading { color: var(--button-inverted-transparent-base-color); } } &.link { - background-color: transparent; - &.loading { color: var(--button-inverted-link-base-color); } From e089359f082dd26d601482dbf5b8cdaf5d9413eb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Denis=20=F0=9F=8E=83=20Khripkov?= Date: Sun, 15 Dec 2024 01:18:35 +0300 Subject: [PATCH 2/3] fix: format; --- packages/button/src/components/base-button/Component.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/button/src/components/base-button/Component.tsx b/packages/button/src/components/base-button/Component.tsx index 94c90458df..93c4e54ed1 100644 --- a/packages/button/src/components/base-button/Component.tsx +++ b/packages/button/src/components/base-button/Component.tsx @@ -16,8 +16,8 @@ import { useFocus } from '@alfalab/hooks'; import { CommonButtonProps, ComponentProps, PrivateButtonProps } from '../../typings'; import defaultColors from './colors.default.module.css'; -import commonStyles from './index.module.css'; import invertedColors from './colors.inverted.module.css'; +import commonStyles from './index.module.css'; const colorStyles = { default: defaultColors, From 4d481b2f67bca23b319874e1f9e6c51e10e91194 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Denis=20=F0=9F=8E=83=20Khripkov?= Date: Tue, 17 Dec 2024 12:06:50 +0300 Subject: [PATCH 3/3] fix: css paths; --- .github/workflows/package-size.yml | 2 +- .../button/src/components/base-button/colors.default.module.css | 2 +- .../src/components/base-button/colors.inverted.module.css | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/.github/workflows/package-size.yml b/.github/workflows/package-size.yml index 16557e314d..938a32d98c 100644 --- a/.github/workflows/package-size.yml +++ b/.github/workflows/package-size.yml @@ -51,7 +51,7 @@ jobs: const now = currentFile[packageName]?.[entryPoint] || 0; const before = masterFile[packageName]?.[entryPoint] || 0; - if (Math.abs(now - before) > 2) { + if (Math.abs(now - before) > 0) { shouldComment = true; acc += `| ${packageName}/${entryPoint} | ${now} ${ now - before > 0 ? `(+${(now - before).toFixed(2)} KB🔺)` : `(-${(before - now).toFixed(2)} KB)` diff --git a/packages/button/src/components/base-button/colors.default.module.css b/packages/button/src/components/base-button/colors.default.module.css index 98cf4d7013..a19d00af4b 100644 --- a/packages/button/src/components/base-button/colors.default.module.css +++ b/packages/button/src/components/base-button/colors.default.module.css @@ -1,5 +1,5 @@ @import '../../vars.css'; -@import 'colors.common.module.css'; +@import './colors.common.module.css'; .accent { color: var(--button-accent-color); diff --git a/packages/button/src/components/base-button/colors.inverted.module.css b/packages/button/src/components/base-button/colors.inverted.module.css index afaa4e89d5..a80ffe1e93 100644 --- a/packages/button/src/components/base-button/colors.inverted.module.css +++ b/packages/button/src/components/base-button/colors.inverted.module.css @@ -1,5 +1,5 @@ @import '../../vars.css'; -@import 'colors.common.module.css'; +@import './colors.common.module.css'; .accent { color: var(--button-inverted-accent-color);