Skip to content

Commit

Permalink
refactor(css,react): rewrite existing data-color components to use ge…
Browse files Browse the repository at this point in the history 
…neric color vars
  • Loading branch information
@unekinn
unekinn committed Oct 28, 2024
1 parent 91bb820 commit c3a9e7a
Show file tree
Hide file tree
Showing 11 changed files with 67 additions and 254 deletions.
42 changes: 5 additions & 37 deletions packages/css/accordion.css
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
.ds-accordion-group {
--dsc-accordion-background: var(--ds-color-neutral-background-default);
--dsc-accordion-background: var(--ds-color-background-default);
--dsc-accordion-border-radius: var(--ds-border-radius-md);
--dsc-accordion-border: 1px solid var(--ds-color-neutral-border-subtle);
--dsc-accordion-border: 1px solid var(--ds-color-border-subtle);
--dsc-accordion-chevron-gap: var(--ds-spacing-2);
--dsc-accordion-chevron-size: var(--ds-spacing-6);
--dsc-accordion-chevron-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.97 9.47a.75.75 0 0 1 1.06 0L12 14.44l4.97-4.97a.75.75 0 1 1 1.06 1.06l-5.5 5.5a.75.75 0 0 1-1.06 0l-5.5-5.5a.75.75 0 0 1 0-1.06'/%3E%3C/svg%3E");
--dsc-accordion-heading-background--hover: var(--ds-color-neutral-surface-default);
--dsc-accordion-heading-background--open: var(--ds-color-neutral-background-subtle);
--dsc-accordion-heading-background: var(--ds-color-neutral-background-default);
--dsc-accordion-heading-background--hover: var(--ds-color-surface-default);
--dsc-accordion-heading-background--open: var(--ds-color-background-subtle);
--dsc-accordion-heading-background: var(--ds-color-background-default);
--dsc-accordion-padding: var(--ds-spacing-2) var(--ds-spacing-4);
--dsc-accordion-size: var(--ds-sizing-14);

Expand All @@ -26,38 +26,6 @@
border-bottom-right-radius: var(--dsc-accordion-border-radius);
}
}

&[data-color='subtle'] {
--dsc-accordion-background: var(--ds-color-neutral-background-subtle);
--dsc-accordion-border: 1px solid var(--ds-color-neutral-border-subtle);
--dsc-accordion-heading-background--hover: var(--ds-color-neutral-surface-hover);
--dsc-accordion-heading-background--open: var(--ds-color-neutral-surface-default);
--dsc-accordion-heading-background: var(--ds-color-neutral-background-subtle);
}

&[data-color='brand1'] {
--dsc-accordion-background: var(--ds-color-brand1-background-subtle);
--dsc-accordion-border: 1px solid var(--ds-color-brand1-border-subtle);
--dsc-accordion-heading-background--hover: var(--ds-color-brand1-surface-hover);
--dsc-accordion-heading-background--open: var(--ds-color-brand1-surface-default);
--dsc-accordion-heading-background: var(--ds-color-brand1-surface-default);
}

&[data-color='brand2'] {
--dsc-accordion-background: var(--ds-color-brand2-background-subtle);
--dsc-accordion-border: 1px solid var(--ds-color-brand2-border-subtle);
--dsc-accordion-heading-background--hover: var(--ds-color-brand2-surface-hover);
--dsc-accordion-heading-background--open: var(--ds-color-brand2-surface-default);
--dsc-accordion-heading-background: var(--ds-color-brand2-surface-default);
}

&[data-color='brand3'] {
--dsc-accordion-background: var(--ds-color-brand3-background-subtle);
--dsc-accordion-border: 1px solid var(--ds-color-brand3-border-subtle);
--dsc-accordion-heading-background--hover: var(--ds-color-brand3-surface-hover);
--dsc-accordion-heading-background--open: var(--ds-color-brand3-surface-default);
--dsc-accordion-heading-background: var(--ds-color-brand3-surface-default);
}
}

.ds-accordion__item {
Expand Down
14 changes: 5 additions & 9 deletions packages/css/alert.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,24 +33,20 @@
/**
* Colors
*/
&[data-color] {
--dsc-alert-background: var(--ds-color-surface-default);
--dsc-alert-border-color: var(--ds-color-border-default);
--dsc-alert-icon-color: var(--ds-color-text-subtle);
}
&[data-color='warning'] {
--dsc-alert-border-color: var(--ds-color-warning-border-default);
--dsc-alert-icon-color: var(--ds-color-warning-text-subtle);
--dsc-alert-background: var(--ds-color-warning-surface-default);
--dsc-alert-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2.25a.75.75 0 0 1 .66.39l9.52 17.25a.75.75 0 0 1-.65 1.11H2.47a.75.75 0 0 1-.65-1.11l9.52-17.25a.75.75 0 0 1 .66-.39m0 6.5a.75.75 0 0 1 .75.75v4a.75.75 0 0 1-1.5 0v-4a.75.75 0 0 1 .75-.75m-1 7.75a1 1 0 1 1 2 0 1 1 0 0 1-2 0'/%3E%3C/svg%3E");
}

&[data-color='success'] {
--dsc-alert-background: var(--ds-color-success-surface-default);
--dsc-alert-border-color: var(--ds-color-success-border-default);
--dsc-alert-icon-color: var(--ds-color-success-text-subtle);
--dsc-alert-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 21.75a9.75 9.75 0 1 0 0-19.5 9.75 9.75 0 0 0 0 19.5m4.95-12.47a.81.81 0 0 0-1.24-1.05l-5.39 6.36-2.62-2.62a.81.81 0 0 0-1.15 1.15l3.25 3.25a.81.81 0 0 0 1.2-.05z'/%3E%3C/svg%3E");
}

&[data-color='danger'] {
--dsc-alert-background: var(--ds-color-danger-surface-default);
--dsc-alert-border-color: var(--ds-color-danger-border-default);
--dsc-alert-icon-color: var(--ds-color-danger-text-subtle);
--dsc-alert-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M7.74 2.47a.75.75 0 0 1 .53-.22h7.46a.75.75 0 0 1 .53.22l5.27 5.27c.14.14.22.33.22.53v7.46a.75.75 0 0 1-.22.53l-5.27 5.27a.75.75 0 0 1-.53.22H8.27a.75.75 0 0 1-.53-.22l-5.27-5.27a.75.75 0 0 1-.22-.53V8.27a.75.75 0 0 1 .22-.53zm1.29 5.5a.75.75 0 0 0-1.06 1.06L10.94 12l-2.97 2.97a.75.75 0 1 0 1.06 1.06L12 13.06l2.97 2.97a.75.75 0 1 0 1.06-1.06L13.06 12l2.97-2.97a.75.75 0 0 0-1.06-1.06L12 10.94z'/%3E%3C/svg%3E");
}
}
30 changes: 2 additions & 28 deletions packages/css/avatar.css
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
.ds-avatar {
--dsc-avatar-background: var(--ds-color-accent-base-default);
--dsc-avatar-color: var(--ds-color-accent-contrast-default);
--dsc-avatar-background: var(--ds-color-base-default);
--dsc-avatar-color: var(--ds-color-contrast-default);
--dsc-avatar-size: var(--ds-sizing-12);
--dsc-avatar-padding: var(--ds-spacing-2);
--dsc-avatar-border-radius: var(--ds-border-radius-full);
Expand Down Expand Up @@ -54,32 +54,6 @@
--dsc-avatar-border-radius: var(--ds-border-radius-sm);
}

&[data-color='accent'] {
--dsc-avatar-background: var(--ds-color-accent-base-default);
--dsc-avatar-color: var(--ds-color-accent-contrast-default);
}

&[data-color='neutral'] {
--dsc-avatar-background: var(--ds-color-neutral-base-default);
--dsc-avatar-color: var(--ds-color-neutral-contrast-default);
}

&[data-color='brand1'] {
--dsc-avatar-background: var(--ds-color-brand1-base-default);
--dsc-avatar-color: var(--ds-color-brand1-contrast-default);
}

&[data-color='brand2'] {
--dsc-avatar-background: var(--ds-color-brand2-base-default);
--dsc-avatar-color: var(--ds-color-brand2-contrast-default);
}

&[data-color='brand3'] {
--dsc-avatar-background: var(--ds-color-brand3-base-default);
--dsc-avatar-color: var(--ds-color-brand3-contrast-default);
}

/* TODO: Sizes */
&[data-size='xs'] {
font-size: var(--ds-body-xs-font-size);
}
Expand Down
29 changes: 2 additions & 27 deletions packages/css/badge.css
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
.ds-badge {
--dsc-badge-background: var(--ds-color-accent-base-default);
--dsc-badge-color: var(--ds-color-accent-contrast-default);
--dsc-badge-background: var(--ds-color-base-default);
--dsc-badge-color: var(--ds-color-contrast-default);
--dsc-badge-padding: 0 calc(var(--ds-spacing-1) + calc(var(--ds-spacing-1) / 2));
--dsc-badge-size: calc(var(--ds-sizing-3) + calc(var(--ds-spacing-1) / 2));

Expand All @@ -26,31 +26,6 @@
font-size: var(--ds-font-size-minus-1); /* Default to small when size is not defined */
}

&[data-color='info'] {
--dsc-badge-background: var(--ds-color-info-base-default);
--dsc-badge-color: var(--ds-color-info-contrast-default);
}

&[data-color='success'] {
--dsc-badge-background: var(--ds-color-success-base-default);
--dsc-badge-color: var(--ds-color-success-contrast-default);
}

&[data-color='warning'] {
--dsc-badge-background: var(--ds-color-warning-base-default);
--dsc-badge-color: var(--ds-color-warning-contrast-default);
}

&[data-color='danger'] {
--dsc-badge-background: var(--ds-color-danger-base-default);
--dsc-badge-color: var(--ds-color-danger-contrast-default);
}

&[data-color='neutral'] {
--dsc-badge-background: var(--ds-color-neutral-surface-default);
--dsc-badge-color: var(--ds-color-neutral-text-default);
}

/* If placement is present, we are floating */
&[data-placement]::before {
position: absolute;
Expand Down
85 changes: 15 additions & 70 deletions packages/css/button.css
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
.ds-button {
--dsc-button-background--active: var(--ds-color-accent-base-active);
--dsc-button-background--hover: var(--ds-color-accent-base-hover);
--dsc-button-background: var(--ds-color-accent-base-default);
--dsc-button-color: var(--ds-color-accent-contrast-default);
--dsc-button-background--active: var(--ds-color-base-active);
--dsc-button-background--hover: var(--ds-color-base-hover);
--dsc-button-background: var(--ds-color-base-default);
--dsc-button-color: var(--ds-color-contrast-default);
--dsc-button-font-size: var(--ds-font-size-5);
--dsc-button-gap: var(--ds-spacing-2);
--dsc-button-padding: var(--ds-spacing-2) var(--ds-spacing-4);
Expand Down Expand Up @@ -60,78 +60,23 @@
* Variants
*/
&[data-variant='secondary'] {
--dsc-button-background--active: var(--ds-color-accent-surface-hover);
--dsc-button-background--hover: var(--ds-color-accent-surface-default);
--dsc-button-background--active: var(--ds-color-surface-hover);
--dsc-button-background--hover: var(--ds-color-surface-default);
--dsc-button-background: transparent;
--dsc-button-border-color: var(--ds-color-accent-border-strong);
--dsc-button-color--active: var(--ds-color-accent-text-default);
--dsc-button-color--hover: var(--ds-color-accent-text-default);
--dsc-button-color: var(--ds-color-accent-text-subtle);
--dsc-button-border-color: var(--ds-color-border-strong);
--dsc-button-color--active: var(--ds-color-text-default);
--dsc-button-color--hover: var(--ds-color-text-default);
--dsc-button-color: var(--ds-color-text-subtle);
}

&[data-variant='tertiary'] {
--dsc-button-background--active: var(--ds-color-accent-surface-hover);
--dsc-button-background--hover: var(--ds-color-accent-surface-default);
--dsc-button-background--active: var(--ds-color-surface-hover);
--dsc-button-background--hover: var(--ds-color-surface-default);
--dsc-button-background: transparent;
--dsc-button-border-color: var(--dsc-button-tertiary-border-color);
--dsc-button-color--active: var(--ds-color-accent-text-default);
--dsc-button-color--hover: var(--ds-color-accent-text-default);
--dsc-button-color: var(--ds-color-accent-text-subtle);
}

/**
* Colors
*/
&[data-color='neutral'] {
--dsc-button-background--active: var(--ds-color-neutral-base-active);
--dsc-button-background--hover: var(--ds-color-neutral-base-hover);
--dsc-button-background: var(--ds-color-neutral-base-default);
--dsc-button-color: var(--ds-color-neutral-contrast-default);
}

&[data-color='neutral'][data-variant='secondary'] {
--dsc-button-background--active: var(--ds-color-neutral-surface-hover);
--dsc-button-background--hover: var(--ds-color-neutral-surface-default);
--dsc-button-background: transparent;
--dsc-button-border-color: var(--ds-color-neutral-border-strong);
--dsc-button-color--active: var(--ds-color-neutral-text-default);
--dsc-button-color--hover: var(--ds-color-neutral-text-default);
--dsc-button-color: var(--ds-color-neutral-text-subtle);
}

&[data-color='neutral'][data-variant='tertiary'] {
--dsc-button-background--active: var(--ds-color-neutral-surface-hover);
--dsc-button-background--hover: var(--ds-color-neutral-surface-default);
--dsc-button-background: transparent;
--dsc-button-color--active: var(--ds-color-neutral-text-default);
--dsc-button-color--hover: var(--ds-color-neutral-text-default);
--dsc-button-color: var(--ds-color-neutral-text-subtle);
}

&[data-color='danger'] {
--dsc-button-background--active: var(--ds-color-danger-base-active);
--dsc-button-background--hover: var(--ds-color-danger-base-hover);
--dsc-button-background: var(--ds-color-danger-base-default);
--dsc-button-color: var(--ds-color-danger-contrast-default);
}

&[data-color='danger'][data-variant='secondary'] {
--dsc-button-background--active: var(--ds-color-danger-surface-hover);
--dsc-button-background--hover: var(--ds-color-danger-surface-default);
--dsc-button-background: transparent;
--dsc-button-border-color: var(--ds-color-danger-border-strong);
--dsc-button-color--active: var(--ds-color-danger-text-default);
--dsc-button-color--hover: var(--ds-color-danger-text-default);
--dsc-button-color: var(--ds-color-danger-text-subtle);
}

&[data-color='danger'][data-variant='tertiary'] {
--dsc-button-background--active: var(--ds-color-danger-surface-hover);
--dsc-button-background--hover: var(--ds-color-danger-surface-default);
--dsc-button-background: transparent;
--dsc-button-color--active: var(--ds-color-danger-text-default);
--dsc-button-color--hover: var(--ds-color-danger-text-default);
--dsc-button-color: var(--ds-color-danger-text-subtle);
--dsc-button-color--active: var(--ds-color-text-default);
--dsc-button-color--hover: var(--ds-color-text-default);
--dsc-button-color: var(--ds-color-text-subtle);
}

/**
Expand Down
47 changes: 13 additions & 34 deletions packages/css/card.css
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,13 @@
.ds-card {
--dsc-card-background--active: var(--ds-color-neutral-surface-default);
--dsc-card-background--hover: var(--ds-color-neutral-background-subtle);
--dsc-card-background: var(--ds-color-neutral-background-default);
--dsc-card-border-color: var(--ds-color-neutral-border-subtle);
--dsc-card-background--active: var(--ds-color-surface-default);
--dsc-card-background--hover: var(--ds-color-background-subtle);
--dsc-card-background: var(--ds-color-surface-default);
&[data-color='neutral'] {
--dsc-card-background: var(--ds-color-background-default);
}
--dsc-card-border-color: var(--ds-color-border-subtle);
--dsc-card-border: 1px solid var(--dsc-card-border-color);
--dsc-card-color: var(--ds-color-neutral-text-default);
--dsc-card-color: var(--ds-color-text-default);
--dsc-card-gap: var(--ds-spacing-3);
--dsc-card-padding: var(--ds-spacing-6);

Expand Down Expand Up @@ -59,35 +62,11 @@
padding: 0; /* Let Card.Block own the padding */
}

&[data-color='subtle'] {
--dsc-card-background--active: var(--ds-color-neutral-surface-hover);
--dsc-card-background--hover: var(--ds-color-neutral-surface-default);
--dsc-card-background: var(--ds-color-neutral-background-subtle);
--dsc-card-border-color: var(--ds-color-neutral-border-subtle);
}

&[data-color='brand1'] {
--dsc-card-background--active: var(--ds-color-brand1-surface-active);
--dsc-card-background--hover: var(--ds-color-brand1-surface-hover);
--dsc-card-background: var(--ds-color-brand1-surface-default);
--dsc-card-border-color: var(--ds-color-brand1-border-subtle);
--dsc-card-color: var(--ds-color-brand1-text-default);
}

&[data-color='brand2'] {
--dsc-card-background--active: var(--ds-color-brand2-surface-active);
--dsc-card-background--hover: var(--ds-color-brand2-surface-hover);
--dsc-card-background: var(--ds-color-brand2-surface-default);
--dsc-card-border-color: var(--ds-color-brand2-border-subtle);
--dsc-card-color: var(--ds-color-brand2-text-default);
}

&[data-color='brand3'] {
--dsc-card-background--active: var(--ds-color-brand3-surface-active);
--dsc-card-background--hover: var(--ds-color-brand3-surface-hover);
--dsc-card-background: var(--ds-color-brand3-surface-default);
--dsc-card-border-color: var(--ds-color-brand3-border-subtle);
--dsc-card-color: var(--ds-color-brand3-text-default);
&[data-subtle=''],
&[data-subtle='true'] {
--dsc-card-background--active: var(--ds-color-surface-hover);
--dsc-card-background--hover: var(--ds-color-surface-default);
--dsc-card-background: var(--ds-color-background-subtle);
}
}

Expand Down
19 changes: 4 additions & 15 deletions packages/css/link.css
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
.ds-link {
--dsc-link-background--active: var(--ds-color-accent-surface-default);
--dsc-link-background--active: var(--ds-color-surface-default);
--dsc-link-background--focus: var(--ds-color-focus-outer);
--dsc-link-color--active: var(--ds-color-accent-text-default);
--dsc-link-color--active: var(--ds-color-text-default);
--dsc-link-color--focus: var(--ds-color-focus-inner);
--dsc-link-color--hover: var(--ds-color-accent-text-default);
--dsc-link-color--hover: var(--ds-color-text-default);
--dsc-link-color--visited: var(--ds-global-purple-12);
--dsc-link-color: var(--ds-color-accent-text-subtle);
--dsc-link-color: var(--ds-color-text-subtle);
--dsc-link-text-decoration-thickness--hover: max(2px, 0.125rem, 0.12em);
--dsc-link-text-decoration-thickness: max(1px, 0.0625rem);

Expand All @@ -19,17 +19,6 @@
vertical-align: middle; /* Align img or svg icon with text */
}

/**
* Colors
*/
&[data-color='neutral'] {
--dsc-link-background--active: var(--ds-color-neutral-surface-default);
--dsc-link-color--active: var(--ds-color-neutral-text-subtle);
--dsc-link-color--hover: var(--ds-color-neutral-text-subtle);
--dsc-link-color--visited: var(--ds-global-purple-12);
--dsc-link-color: var(--ds-color-neutral-text-default);
}

/**
* States
*/
Expand Down
2 changes: 1 addition & 1 deletion packages/css/spinner.css
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
.ds-spinner {
--dsc-spinner-background: var(--ds-color-neutral-surface-default);
--dsc-spinner-stroke: var(--ds-color-neutral-border-default);
--dsc-spinner-stroke: var(--ds-color-border-default);
--dsc-spinner-animation-duration: 2s;

animation: ds-spinner-rotate-animation linear infinite var(--dsc-spinner-animation-duration);
Expand Down
Loading

0 comments on commit c3a9e7a

Please sign in to comment.