From 1c2f411c87fc0242e0d70ca826e78521a3ff7cd5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andreas=20Riedm=C3=BCller?= Date: Mon, 23 Sep 2024 07:23:02 +0200 Subject: [PATCH] feat: Switch to border width and color vars instead of border shorthand --- packages/ui/lib/Button/styles.module.css | 11 ++++++--- packages/ui/lib/TextInput/styles.module.css | 13 +++++++--- packages/ui/lib/default-custom-properties.css | 24 +++++++++++++++---- .../lib/helperClasses/card/styles.module.css | 5 ++-- 4 files changed, 41 insertions(+), 12 deletions(-) diff --git a/packages/ui/lib/Button/styles.module.css b/packages/ui/lib/Button/styles.module.css index c6d3f0e..28a72be 100644 --- a/packages/ui/lib/Button/styles.module.css +++ b/packages/ui/lib/Button/styles.module.css @@ -1,12 +1,16 @@ .button { font: inherit; - border: var(--sys42-button-border); + border: var(--sys42-button-border-width) solid + var(--sys42-button-border-color); font-size: var(--sys42-button-font-size); font-weight: var(--sys42-button-font-weight); line-height: var(--sys42-button-line-height); background: var(--sys42-button-background); color: var(--sys42-button-color); - padding: var(--sys42-button-padding-horiz) var(--sys42-button-padding-vert); + padding: calc( + var(--sys42-button-padding-horiz) - var(--sys42-button-border-width) + ) + calc(var(--sys42-button-padding-vert) - var(--sys42-button-border-width)); border-radius: var(--sys42-button-border-radius); box-shadow: var(--sys42-button-shadow); transition: var(--sys42-button-transition); @@ -49,8 +53,9 @@ .button_primary { background: var(--sys42-button_primary-background); + border: var(--sys42-button_primary-border-width) solid + var(--sys42-button_primary-border-color); color: var(--sys42-button_primary-color); - border-color: var(--sys42-button_primary-border-color); font-weight: var( --sys42-button_primary-font-weight, var(--sys42-button-font-weight) diff --git a/packages/ui/lib/TextInput/styles.module.css b/packages/ui/lib/TextInput/styles.module.css index 48266c7..b3dff5d 100644 --- a/packages/ui/lib/TextInput/styles.module.css +++ b/packages/ui/lib/TextInput/styles.module.css @@ -1,8 +1,15 @@ .textInput { font-size: 1em; background: var(--sys42-input-text-background); - border: var(--sys42-input-text-border); + border: var(--sys42-input-text-border-width) solid + var(--sys42-input-text-border-color); border-radius: var(--sys42-input-text-border-radius); - padding: var(--sys42-input-text-padding-vert) - var(--sys42-input-text-padding-horiz); + padding: calc( + var(--sys42-input-text-padding-vert) - + var(--sys42-input-text-border-width) + ) + calc( + var(--sys42-input-text-padding-horiz) - + var(--sys42-input-text-border-width) + ); } diff --git a/packages/ui/lib/default-custom-properties.css b/packages/ui/lib/default-custom-properties.css index 16960e5..20f715a 100644 --- a/packages/ui/lib/default-custom-properties.css +++ b/packages/ui/lib/default-custom-properties.css @@ -19,7 +19,8 @@ /* Button */ --sys42-button-background: #eee; - --sys42-button-border: 1px solid #ddd; + --sys42-button-border-width: 1px; + --sys42-button-border-color: #ddd; --sys42-button-color: #333; --sys42-button-font-weight: normal; --sys42-button-font-size: 1rem; @@ -33,6 +34,7 @@ /* :hover */ --sys42-button-background--hover: #eee; --sys42-button-border-color--hover: #aaa; + --sys42-button-border-width--hover: var(--sys42-button-border-width); --sys42-button-color--hover: #333; --sys42-button-shadow--hover: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); --sys42-button-transition--hover: background-color 0.15s ease-in-out, @@ -40,10 +42,12 @@ /* :active */ --sys42-button-background--active: #ddd; --sys42-button-border-color--active: #aaa; + --sys42-button-border-width--active: var(--sys42-button-border-width); --sys42-button-color--active: #333; /* :disabled */ --sys42-button-background--disabled: #eee; --sys42-button-border-color--disabled: #ddd; + --sys42-button-border-width--disabled: var(--sys42-button-border-width); --sys42-button-color--disabled: #999; /* :focus-visible */ --sys42-button-outline--focus-visible: 0.125rem solid #333; @@ -51,20 +55,30 @@ /* Button (primary) */ --sys42-button_primary-background: #333; - --sys42-button_primary-border: 0; + --sys42-button_primary-border-color: #333; + --sys42-button_primary-border-width: 0; --sys42-button_primary-color: #fff; --sys42-button_primary-font-weight: normal; /* :hover */ --sys42-button_primary-background--hover: #444; --sys42-button_primary-border-color--hover: #444; + --sys42-button_primary-border-width--hover: var( + --sys42-button_primary-border-width + ); --sys42-button_primary-color--hover: #fff; /* :active */ --sys42-button_primary-background--active: #333; --sys42-button_primary-border-color--active: #333; + --sys42-button_primary-border-width--active: var( + --sys42-button_primary-border-width + ); --sys42-button_primary-color--active: #fff; /* :disabled */ --sys42-button_primary-background--disabled: #aaa; --sys42-button_primary-border-color--disabled: #aaa; + --sys42-button_primary-border-width--disabled: var( + --sys42-button_primary-border-width + ); --sys42-button_primary-color--disabled: #eee; /* Button (size: lg) */ @@ -78,7 +92,8 @@ /* Input Text */ --sys42-input-text-background: #fff; --sys42-input-text-border-radius: var(--sys42-border-radius-sm); - --sys42-input-text-border: 1px solid #ddd; + --sys42-input-text-border-width: 1px; + --sys42-input-text-border-color: #ddd; --sys42-input-text-padding-horiz: 0.5rem; --sys42-input-text-padding-vert: 0.5rem; @@ -88,7 +103,8 @@ /* classCard */ --sys42-card-background: #fff; --sys42-card-border-radius: var(--sys42-border-radius-md); - --sys42-card-border: 1px solid #ddd; + --sys42-card-border-width: 1px; + --sys42-card-border-color: #ddd; --sys42-card-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); --sys42-card-padding-vert: var(--sys42-spacing-md); --sys42-card-padding-horiz: var(--sys42-spacing-md); diff --git a/packages/ui/lib/helperClasses/card/styles.module.css b/packages/ui/lib/helperClasses/card/styles.module.css index 5e6d2d5..fca4a8a 100644 --- a/packages/ui/lib/helperClasses/card/styles.module.css +++ b/packages/ui/lib/helperClasses/card/styles.module.css @@ -1,7 +1,8 @@ .card { background: var(--sys42-card-background); border-radius: var(--sys42-card-border-radius); - border: var(--sys42-card-border); + border: var(--sys42-card-border-width) solid var(--sys42-card-border-color); box-shadow: var(--sys42-card-shadow); - padding: var(--sys42-card-padding-vert) var(--sys42-card-padding-horiz); + padding: calc(var(--sys42-card-padding-vert) - var(--sys42-card-border-width)) + calc(var(--sys42-card-padding-horiz) - var(--sys42-card-border-width)); }