Skip to content

Commit

Permalink
Refactor theme structure (#1960)
Browse files Browse the repository at this point in the history
  • Loading branch information
joshwooding authored Jul 12, 2023
1 parent 78ee0b8 commit 1f0cb87
Show file tree
Hide file tree
Showing 30 changed files with 527 additions and 483 deletions.
7 changes: 7 additions & 0 deletions .changeset/plenty-eggs-add.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
"@salt-ds/theme": patch
---

Refactored the theme file structure for easier maintainability.

Added the missing deprecated token: `--salt-palette-warning-foreground-disabled`.
5 changes: 0 additions & 5 deletions packages/theme/css/characteristics/differential.css

This file was deleted.

7 changes: 0 additions & 7 deletions packages/theme/css/characteristics/editable.css
Original file line number Diff line number Diff line change
Expand Up @@ -30,11 +30,4 @@
--salt-editable-secondary-background-readonly: var(--salt-palette-neutral-secondary-background-readonly);

--salt-editable-help-fontStyle: italic;

/* **Deprecated:** Will be deleted on next breaking change */
--salt-editable-tertiary-background: var(--salt-palette-neutral-tertiary-background);
--salt-editable-tertiary-background-active: var(--salt-palette-neutral-tertiary-background);
--salt-editable-tertiary-background-disabled: var(--salt-palette-neutral-tertiary-background-disabled);
--salt-editable-tertiary-background-hover: var(--salt-palette-neutral-tertiary-background);
--salt-editable-tertiary-background-readonly: var(--salt-palette-neutral-tertiary-background-readonly);
}
30 changes: 0 additions & 30 deletions packages/theme/css/characteristics/measured.css

This file was deleted.

3 changes: 0 additions & 3 deletions packages/theme/css/characteristics/overlayable.css
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,4 @@
--salt-overlayable-shadow-modal: var(--salt-shadow-5);

--salt-overlayable-background: var(--salt-palette-neutral-backdrop);

/* **deprecated**: use --salt-shadow-1-color instead */
--salt-overlayable-shadow-scroll-color: var(--salt-shadow-1-color);
}
12 changes: 0 additions & 12 deletions packages/theme/css/characteristics/selectable.css
Original file line number Diff line number Diff line change
Expand Up @@ -54,16 +54,4 @@
--salt-selectable-secondary-background-hover: var(--salt-palette-interact-secondary-background-hover);
--salt-selectable-secondary-background-selected: var(--salt-palette-interact-secondary-background-active);
--salt-selectable-secondary-background-selectedDisabled: var(--salt-palette-interact-secondary-background-activeDisabled);

/* **Deprecated:** use --salt-selectable-foreground-selected instead */
--salt-selectable-foreground-partial: var(--salt-palette-interact-foreground-partial);
--salt-selectable-foreground-partialDisabled: var(--salt-palette-interact-foreground-partialDisabled);

/* **Deprecated:** use --salt-text-foreground, --salt-text-foreground-disabled instead */
--salt-selectable-cta-foreground: var(--salt-palette-interact-foreground);
--salt-selectable-cta-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
--salt-selectable-primary-foreground: var(--salt-palette-interact-foreground);
--salt-selectable-primary-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
--salt-selectable-secondary-foreground: var(--salt-palette-interact-foreground);
--salt-selectable-secondary-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
}
17 changes: 0 additions & 17 deletions packages/theme/css/characteristics/status.css
Original file line number Diff line number Diff line change
Expand Up @@ -20,21 +20,4 @@
--salt-status-success-background-selected: var(--salt-palette-success-background-selected);
--salt-status-warning-background-selected: var(--salt-palette-warning-background-selected);
--salt-status-error-background-selected: var(--salt-palette-error-background-selected);

/* Deprecated */
--salt-status-info-background-emphasize: var(--salt-status-info-background);
--salt-status-success-background-emphasize: var(--salt-status-success-background);
--salt-status-warning-background-emphasize: var(--salt-status-warning-background);
--salt-status-error-background-emphasize: var(--salt-status-error-background);
--salt-status-info-foreground-disabled: var(--salt-palette-info-foreground-disabled);
--salt-status-success-foreground-disabled: var(--salt-palette-success-foreground-disabled);
--salt-status-warning-foreground-disabled: var(--salt-palette-warning-foreground-disabled);
--salt-status-error-foreground-disabled: var(--salt-palette-error-foreground-disabled);
--salt-status-static-foreground-disabled: var(--salt-palette-neutral-secondary-foreground-disabled);
--salt-status-negative-foreground-disabled: var(--salt-palette-negative-foreground-disabled);
--salt-status-positive-foreground-disabled: var(--salt-palette-positive-foreground-disabled);
--salt-status-info-borderColor-disabled: var(--salt-palette-info-border-disabled);
--salt-status-success-borderColor-disabled: var(--salt-palette-success-border-disabled);
--salt-status-warning-borderColor-disabled: var(--salt-palette-warning-border-disabled);
--salt-status-error-borderColor-disabled: var(--salt-palette-error-border-disabled);
}
71 changes: 71 additions & 0 deletions packages/theme/css/deprecated/characteristics.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
.salt-theme {
/* Differential */
--salt-differential-positive-foreground: var(--salt-palette-positive-foreground);
--salt-differential-negative-foreground: var(--salt-palette-negative-foreground);

/* Editable */
--salt-editable-tertiary-background: var(--salt-palette-neutral-tertiary-background);
--salt-editable-tertiary-background-active: var(--salt-palette-neutral-tertiary-background);
--salt-editable-tertiary-background-disabled: var(--salt-palette-neutral-tertiary-background-disabled);
--salt-editable-tertiary-background-hover: var(--salt-palette-neutral-tertiary-background);
--salt-editable-tertiary-background-readonly: var(--salt-palette-neutral-tertiary-background-readonly);

/* Measured */
--salt-measured-borderStyle: solid;
--salt-measured-borderStyle-active: solid;
--salt-measured-borderStyle-complete: solid;
--salt-measured-borderStyle-incomplete: dotted;
--salt-measured-borderWidth: 2px;
--salt-measured-borderWidth-active: 2px;
--salt-measured-borderWidth-complete: 2px;
--salt-measured-borderWidth-incomplete: 2px;

--salt-measured-fontWeight: var(--salt-typography-fontWeight-semiBold);
--salt-measured-textAlign: center;

--salt-measured-background: var(--salt-palette-measured-background);
--salt-measured-background-disabled: var(--salt-palette-measured-background-disabled);
--salt-measured-borderColor: var(--salt-palette-measured-border);
--salt-measured-borderColor-disabled: var(--salt-palette-measured-border-disabled);
--salt-measured-fill: var(--salt-palette-measured-fill);
--salt-measured-fill-disabled: var(--salt-palette-measured-fill-disabled);
--salt-measured-foreground: var(--salt-palette-measured-foreground);
--salt-measured-foreground-hover: var(--salt-palette-measured-foreground-active);
--salt-measured-foreground-active: var(--salt-palette-measured-foreground-active);
--salt-measured-foreground-undo: var(--salt-palette-measured-foreground-active);
--salt-measured-foreground-activeDisabled: var(--salt-palette-measured-foreground-activeDisabled);
--salt-measured-foreground-disabled: var(--salt-palette-measured-foreground-disabled);

/* Overlayable */
--salt-overlayable-shadow-scroll-color: var(--salt-shadow-1-color);

/* Selectable */
--salt-selectable-foreground-partial: var(--salt-palette-interact-foreground-partial);
--salt-selectable-foreground-partialDisabled: var(--salt-palette-interact-foreground-partialDisabled);

--salt-selectable-cta-foreground: var(--salt-palette-interact-foreground);
--salt-selectable-cta-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
--salt-selectable-primary-foreground: var(--salt-palette-interact-foreground);
--salt-selectable-primary-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
--salt-selectable-secondary-foreground: var(--salt-palette-interact-foreground);
--salt-selectable-secondary-foreground-disabled: var(--salt-palette-interact-foreground-disabled);

/* Status */
--salt-status-info-background-emphasize: var(--salt-status-info-background);
--salt-status-success-background-emphasize: var(--salt-status-success-background);
--salt-status-warning-background-emphasize: var(--salt-status-warning-background);
--salt-status-error-background-emphasize: var(--salt-status-error-background);

--salt-status-info-foreground-disabled: var(--salt-palette-info-foreground-disabled);
--salt-status-success-foreground-disabled: var(--salt-palette-success-foreground-disabled);
--salt-status-warning-foreground-disabled: var(--salt-palette-warning-foreground-disabled);
--salt-status-error-foreground-disabled: var(--salt-palette-error-foreground-disabled);
--salt-status-static-foreground-disabled: var(--salt-palette-neutral-secondary-foreground-disabled);
--salt-status-negative-foreground-disabled: var(--salt-palette-negative-foreground-disabled);
--salt-status-positive-foreground-disabled: var(--salt-palette-positive-foreground-disabled);

--salt-status-info-borderColor-disabled: var(--salt-palette-info-border-disabled);
--salt-status-success-borderColor-disabled: var(--salt-palette-success-border-disabled);
--salt-status-warning-borderColor-disabled: var(--salt-palette-warning-border-disabled);
--salt-status-error-borderColor-disabled: var(--salt-palette-error-border-disabled);
}
8 changes: 8 additions & 0 deletions packages/theme/css/deprecated/fade.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
.salt-theme {
--salt-color-orange-500-fade-foreground: rgba(234, 115, 25, var(--salt-palette-opacity-foreground));
--salt-color-orange-700-fade-foreground: rgba(214, 85, 19, var(--salt-palette-opacity-foreground));
--salt-color-orange-400-fade-background: rgba(238, 133, 43, var(--salt-palette-opacity-background));
--salt-color-orange-600-fade-background: rgba(224, 101, 25, var(--salt-palette-opacity-background));
--salt-color-blue-300-fade-fill: rgba(51, 141, 205, var(--salt-palette-opacity-fill));
--salt-color-blue-500-fade-fill: rgba(38, 112, 169, var(--salt-palette-opacity-fill));
}
35 changes: 35 additions & 0 deletions packages/theme/css/deprecated/foundations.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
/*
* **Deprecated:** Use duration instead
*/
.salt-theme {
/* Delay */
--salt-delay-instant: 100ms;
--salt-delay-perceptible: 300ms;
--salt-delay-notable: 1000ms;
--salt-delay-cutoff: 10000ms;

/* Icon */
--salt-size-icon-base: var(--salt-icon-size-base);

/* Opacity */
--salt-opacity-1: 0.15;
--salt-opacity-2: 0.25;
--salt-opacity-3: 0.4;
--salt-opacity-4: 0.7;
}

.salt-density-touch,
.salt-density-low,
.salt-density-medium,
.salt-density-high {
/* Size */
--salt-size-selection: var(--salt-size-selectable);
--salt-size-brandBar: 4px; /* Use --salt-size-accent */
--salt-size-graphic-small: 12px;
--salt-size-graphic-medium: 24px;
--salt-size-graphic-large: 48px;
--salt-size-divider-height: var(--salt-size-separator-height);
--salt-size-divider-strokeWidth: var(--salt-size-separator-strokeWidth);

--salt-size-detail: var(--salt-size-compact);
}
93 changes: 93 additions & 0 deletions packages/theme/css/deprecated/palette.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
/*
* **Deprecated:**
* Delete below on breaking change
*/

.salt-theme {
--salt-palette-error-background-emphasize: var(--salt-palette-error-background);
--salt-palette-warning-background-emphasize: var(--salt-palette-warning-background);
--salt-palette-success-background-emphasize: var(--salt-palette-success-background);
--salt-palette-info-background-emphasize: var(--salt-palette-info-background);

--salt-palette-opacity-fill: var(--salt-palette-opacity-disabled);
--salt-palette-opacity-stroke: var(--salt-palette-opacity-disabled);
--salt-palette-opacity-background: var(--salt-palette-opacity-disabled);
--salt-palette-opacity-border: var(--salt-palette-opacity-disabled);
--salt-palette-opacity-foreground: var(--salt-palette-opacity-disabled);
}

.salt-theme[data-mode="light"] {
/* Interact */
--salt-palette-interact-foreground-partial: var(--salt-color-blue-600);
--salt-palette-interact-foreground-partialDisabled: var(--salt-color-blue-600-fade-foreground);

/* Measure */
--salt-palette-measured-fill: var(--salt-color-blue-500);
--salt-palette-measured-fill-disabled: var(--salt-color-blue-500-fade-fill);
--salt-palette-measured-foreground: var(--salt-color-gray-90);
--salt-palette-measured-foreground-active: var(--salt-color-blue-500);
--salt-palette-measured-foreground-disabled: var(--salt-color-gray-90-fade-foreground);
--salt-palette-measured-foreground-activeDisabled: var(--salt-color-blue-500-fade-fill);
--salt-palette-measured-background: var(--salt-color-gray-60);
--salt-palette-measured-background-disabled: var(--salt-color-gray-60-fade-background);
--salt-palette-measured-border: var(--salt-color-gray-90);
--salt-palette-measured-border-disabled: var(--salt-color-gray-90-fade-border);

/* Neutral */
--salt-palette-neutral-tertiary-background-readonly: transparent;

/* Status */
--salt-palette-error-foreground-disabled: var(--salt-color-red-500-fade-foreground);
--salt-palette-error-border-disabled: var(--salt-color-red-500-fade-border);

--salt-palette-info-border-disabled: var(--salt-color-blue-500-fade-border);
--salt-palette-info-foreground-disabled: var(--salt-color-blue-500-fade-foreground);

--salt-palette-negative-foreground-disabled: var(--salt-color-red-700-fade-foreground);

--salt-palette-positive-foreground-disabled: var(--salt-color-green-700-fade-foreground);

--salt-palette-success-border-disabled: var(--salt-color-green-500-fade-border);
--salt-palette-success-foreground-disabled: var(--salt-color-green-500-fade-foreground);

--salt-palette-warning-foreground-disabled: var(--salt-color-orange-700-fade-foreground);
--salt-palette-warning-border-disabled: var(--salt-color-orange-700-fade-border);
}

.salt-theme[data-mode="dark"] {
/* Interact */
--salt-palette-interact-foreground-partial: var(--salt-color-blue-100);
--salt-palette-interact-foreground-partialDisabled: var(--salt-color-blue-100-fade-foreground);

/* Measure */
--salt-palette-measured-fill: var(--salt-color-blue-300);
--salt-palette-measured-fill-disabled: var(--salt-color-blue-300-fade-fill);
--salt-palette-measured-foreground: var(--salt-color-gray-90);
--salt-palette-measured-foreground-active: var(--salt-color-blue-300);
--salt-palette-measured-foreground-disabled: var(--salt-color-gray-90-fade-foreground);
--salt-palette-measured-foreground-activeDisabled: var(--salt-color-blue-300-fade-fill);
--salt-palette-measured-background: var(--salt-color-gray-300);
--salt-palette-measured-background-disabled: var(--salt-color-gray-300-fade-background);
--salt-palette-measured-border: var(--salt-color-gray-90);
--salt-palette-measured-border-disabled: var(--salt-color-gray-90-fade-border);

/* Neutral */
--salt-palette-neutral-tertiary-background-readonly: transparent;

/* Status */
--salt-palette-error-foreground-disabled: var(--salt-color-red-500-fade-foreground);
--salt-palette-error-border-disabled: var(--salt-color-red-500-fade-border);

--salt-palette-info-border-disabled: var(--salt-color-blue-500-fade-border);
--salt-palette-info-foreground-disabled: var(--salt-color-blue-500-fade-foreground);

--salt-palette-negative-foreground-disabled: var(--salt-color-red-300-fade-foreground);

--salt-palette-positive-foreground-disabled: var(--salt-color-green-300-fade-foreground);

--salt-palette-success-border-disabled: var(--salt-color-green-400-fade-border);
--salt-palette-success-foreground-disabled: var(--salt-color-green-400-fade-foreground);

--salt-palette-warning-foreground-disabled: var(--salt-color-orange-500-fade-foreground);
--salt-palette-warning-border-disabled: var(--salt-color-orange-500-fade-border);
}
9 changes: 0 additions & 9 deletions packages/theme/css/foundations/delay.css

This file was deleted.

10 changes: 2 additions & 8 deletions packages/theme/css/foundations/fade.css
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,6 @@
--salt-color-green-400-fade-foreground: rgba(48, 156, 90, var(--salt-palette-opacity-disabled));
--salt-color-green-500-fade-foreground: rgba(36, 135, 75, var(--salt-palette-opacity-disabled));
--salt-color-green-700-fade-foreground: rgba(12, 93, 46, var(--salt-palette-opacity-disabled));
--salt-color-orange-500-fade-foreground: rgba(234, 115, 25, var(--salt-palette-opacity-disabled));
--salt-color-orange-700-fade-foreground: rgba(214, 85, 19, var(--salt-palette-opacity-disabled));
--salt-color-red-300-fade-foreground: rgba(255, 89, 66, var(--salt-palette-opacity-disabled));
--salt-color-red-500-fade-foreground: rgba(227, 43, 22, var(--salt-palette-opacity-disabled));
--salt-color-red-700-fade-foreground: rgba(166, 21, 11, var(--salt-palette-opacity-disabled));
Expand Down Expand Up @@ -44,8 +42,6 @@
--salt-color-gray-300-fade-background: rgba(76, 80, 91, var(--salt-palette-opacity-disabled));
--salt-color-gray-600-fade-background: rgba(47, 49, 54, var(--salt-palette-opacity-disabled));
--salt-color-gray-800-fade-background: rgba(36, 37, 38, var(--salt-palette-opacity-disabled));
--salt-color-orange-400-fade-background: rgba(238, 133, 43, var(--salt-palette-opacity-disabled));
--salt-color-orange-600-fade-background: rgba(224, 101, 25, var(--salt-palette-opacity-disabled));
--salt-color-white-fade-background: rgba(255, 255, 255, var(--salt-palette-opacity-disabled));

--salt-color-white-fade-background-readonly: rgba(255, 255, 255, var(--salt-palette-opacity-background-readonly));
Expand All @@ -55,10 +51,8 @@

--salt-color-black-fade-backdrop: rgba(36, 37, 38, var(--salt-palette-opacity-backdrop));

--salt-color-blue-100-fade-fill: rgba(100, 177, 228, var(--salt-palette-opacity-fill));
--salt-color-blue-300-fade-fill: rgba(51, 141, 205, var(--salt-palette-opacity-fill));
--salt-color-blue-500-fade-fill: rgba(38, 112, 169, var(--salt-palette-opacity-fill));
--salt-color-blue-600-fade-fill: rgba(21, 92, 147, var(--salt-palette-opacity-fill));
--salt-color-blue-100-fade-fill: rgba(100, 177, 228, var(--salt-palette-opacity-disabled));
--salt-color-blue-600-fade-fill: rgba(21, 92, 147, var(--salt-palette-opacity-disabled));

--salt-color-white-fade-separatorOpacity-primary: rgba(255, 255, 255, var(--salt-palette-opacity-primary-border));
--salt-color-white-fade-separatorOpacity-secondary: rgba(255, 255, 255, var(--salt-palette-opacity-secondary-border));
Expand Down
5 changes: 0 additions & 5 deletions packages/theme/css/foundations/icon.css
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,3 @@
--salt-icon-size-base: 10px;
--salt-icon-size-status-adornment: 6px;
}

.salt-theme {
/* **Deprecated:** Replacement tokens should be used as noted */
--salt-size-icon-base: var(--salt-icon-size-base);
}
6 changes: 0 additions & 6 deletions packages/theme/css/foundations/opacity.css
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,4 @@
--salt-opacity-25: 0.25;
--salt-opacity-40: 0.4;
--salt-opacity-70: 0.7;

/** Deprecated: Prefer to use above tokens **/
--salt-opacity-1: 0.15;
--salt-opacity-2: 0.25;
--salt-opacity-3: 0.4;
--salt-opacity-4: 0.7;
}
Loading

1 comment on commit 1f0cb87

@vercel
Copy link

@vercel vercel bot commented on 1f0cb87 Jul 12, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.