Skip to content

Commit

Permalink
fix!: align tokens with figma variables (#8311)
Browse files Browse the repository at this point in the history 
**Related Issue:** #8310

## Summary

There were some misalignments between figma variables and tokens as well
as some changes to names to better align with the naming schema.

Core tokens are a logical scale
Semantic tokens have meaningful names representing their usage.

BREAKING CHANGE:

- Box-shadow is now shadow
- Core font family tokens use the font name
- Remove unnecessary core tokens line-height, font-size, letter-spacing,
paragraph-spacing as these can be exclusive to semantic and reference
core size tokens
- Core size tokens now use their pixel size in their name
- Border-radius is now corner-radius
- Border-width removed unnecessary tokens none, sm, md, lg
- Success, info, warning, and danger colors are now prefixed with the
name "status"
  -   --color-status-info-hover
  • Loading branch information
@alisonailea @benelan
alisonailea authored and benelan committed Dec 2, 2023
1 parent 6fac3e9 commit 8d7cf3f
Show file tree
Hide file tree
Showing 47 changed files with 1,692 additions and 1,970 deletions.
20 changes: 10 additions & 10 deletions packages/calcite-components/calcite-preset.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,12 +48,12 @@ export default {
brand: "var(--calcite-color-brand)",
"brand-hover": "var(--calcite-color-brand-hover)",
"brand-press": "var(--calcite-color-brand-press)",
info: "var(--calcite-color-info)",
success: "var(--calcite-color-success)",
warning: "var(--calcite-color-warning)",
danger: "var(--calcite-color-danger)",
"danger-hover": "var(--calcite-color-danger-hover)",
"danger-press": "var(--calcite-color-danger-press)",
info: "var(--calcite-color-status-info)",
success: "var(--calcite-color-status-success)",
warning: "var(--calcite-color-status-warning)",
danger: "var(--calcite-color-status-danger)",
"danger-hover": "var(--calcite-color-status-danger-hover)",
"danger-press": "var(--calcite-color-status-danger-press)",
background: {
background: "var(--calcite-color-background)",
foreground: {
Expand Down Expand Up @@ -159,10 +159,10 @@ export default {
boxShadow: {
0: "0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04)",
1: "0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04)",
"1-lg": "var(--calcite-box-shadow-sm)",
"1-lg": "var(--calcite-shadow-sm)",
"1-sm": "0 1px 6px -1px rgba(0, 0, 0, 0.16), 0 1px 2px -1px rgba(0, 0, 0, 0.08)",
2: "0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08)",
"2-lg": "var(--calcite-box-shadow-md)",
"2-lg": "var(--calcite-shadow-md)",
"2-sm": "0 2px 12px -4px rgba(0, 0, 0, 0.2), 0 2px 4px -2px rgba(0, 0, 0, 0.16)",
"border-bottom": "0 1px 0 var(--calcite-color-border-3)",
"border-top": "0 -1px 0 var(--calcite-color-border-3)",
Expand Down Expand Up @@ -269,11 +269,11 @@ export default {
"outline-offset": invert("-2px", "--calcite-offset-invert-focus"),
},
".focus-outset-danger": {
outline: "2px solid var(--calcite-color-danger)",
outline: "2px solid var(--calcite-color-status-danger)",
"outline-offset": invert("2px", "--calcite-offset-invert-focus"),
},
".focus-inset-danger": {
outline: "2px solid var(--calcite-color-danger)",
outline: "2px solid var(--calcite-color-status-danger)",
"outline-offset": invert("-2px", "--calcite-offset-invert-focus"),
},
".transition-default": {
Expand Down
12 changes: 6 additions & 6 deletions packages/calcite-components/src/05-custom-theme.stories.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,12 @@ export const Template = () =>
--calcite-color-brand: ${color("--calcite-color-brand", "#007ac2")};
--calcite-color-brand-hover: ${color("--calcite-color-brand-hover", "#00619b")};
--calcite-color-brand-press: ${color("--calcite-color-brand-press", "#004874")};
--calcite-color-info: ${color("--calcite-color-info", "#00619b")};
--calcite-color-success: ${color("--calcite-color-success", "#35ac46")};
--calcite-color-warning: ${color("--calcite-color-warning", "#edd317")};
--calcite-color-danger: ${color("--calcite-color-danger", "#d83020")};
--calcite-color-danger-hover: ${color("--calcite-color-danger-hover", "#a82b1e")};
--calcite-color-danger-press: ${color("--calcite-color-danger-press", "#7c1d13")};
--calcite-color-status-info: ${color("--calcite-color-status-info", "#00619b")};
--calcite-color-status-success: ${color("--calcite-color-status-success", "#35ac46")};
--calcite-color-status-warning: ${color("--calcite-color-status-warning", "#edd317")};
--calcite-color-status-danger: ${color("--calcite-color-status-danger", "#d83020")};
--calcite-color-status-danger-hover: ${color("--calcite-color-status-danger-hover", "#a82b1e")};
--calcite-color-status-danger-press: ${color("--calcite-color-status-danger-press", "#7c1d13")};
--calcite-color-background: ${color("--calcite-color-background", "#f8f8f8")};
--calcite-color-foreground-1: ${color("--calcite-color-foreground-1", "#ffffff")};
--calcite-color-foreground-2: ${color("--calcite-color-foreground-2", "#f3f3f3")};
Expand Down
6 changes: 3 additions & 3 deletions packages/calcite-components/src/components/alert/alert.e2e.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -239,8 +239,8 @@ describe("calcite-alert", () => {
page = await newE2EPage({ html: alertSnippet });
progressBarStyles = await page.evaluate(() => {
const alert = document.querySelector("calcite-alert");
alert.style.setProperty("--calcite-color-background-transparent-dismiss", "white");
return window.getComputedStyle(alert).getPropertyValue("--calcite-color-background-transparent-dismiss");
alert.style.setProperty("--calcite-alert-dismiss-progress-background", "white");
return window.getComputedStyle(alert).getPropertyValue("--calcite-alert-dismiss-progress-background");
});
expect(progressBarStyles).toEqual("white");
});
Expand Down Expand Up @@ -273,7 +273,7 @@ describe("calcite-alert", () => {
html: `
<style>
:root {
--calcite-color-background-transparent-dismiss: ${overrideStyle};
--calcite-color-transparent-tint: ${overrideStyle};
}
</style>
<div>${alertSnippet}</div>`,
Expand Down
8 changes: 5 additions & 3 deletions packages/calcite-components/src/components/alert/alert.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ $border-style: 1px solid var(--calcite-color-border-3);

:host {
--calcite-alert-edge-distance: theme("spacing.8");
--calcite-alert-dismiss-progress-background: var(--calcite-color-transparent-tint);
@apply block;
}

Expand Down Expand Up @@ -128,7 +129,7 @@ $border-style: 1px solid var(--calcite-color-border-3);
block;
block-size: 2px;
content: "";
background-color: var(--calcite-color-background-transparent-dismiss);
background-color: var(--calcite-alert-dismiss-progress-background);
inset-inline-end: 0;
}
}
Expand Down Expand Up @@ -257,8 +258,9 @@ $border-style: 1px solid var(--calcite-color-border-3);
@apply text-color-link inline-flex;
}

$alertKinds: "brand" var(--calcite-color-brand), "info" var(--calcite-color-info), "danger" var(--calcite-color-danger),
"success" var(--calcite-color-success), "warning" var(--calcite-color-warning);
$alertKinds: "brand" var(--calcite-color-brand), "info" var(--calcite-color-status-info),
"danger" var(--calcite-color-status-danger), "success" var(--calcite-color-status-success),
"warning" var(--calcite-color-status-warning);

@each $alertKind in $alertKinds {
$name: nth($alertKind, 1);
Expand Down
12 changes: 5 additions & 7 deletions packages/calcite-components/src/components/button/button.e2e.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -481,13 +481,11 @@ describe("calcite-button", () => {
page = await newE2EPage({ html: buttonSnippet });
const buttonStyles = await page.evaluate(() => {
buttonEl = document.querySelector("calcite-button");
buttonEl.style.setProperty("--calcite-color-background-transparent-hover", "rgba(34, 23, 200, 0.4)");
buttonEl.style.setProperty("--calcite-color-background-transparent-press", "rgba(1, 20, 44, 0.1");
buttonEl.style.setProperty("--calcite-color-transparent-hover", "rgba(34, 23, 200, 0.4)");
buttonEl.style.setProperty("--calcite-color-transparent-press", "rgba(1, 20, 44, 0.1");
return {
hoverFocus: window
.getComputedStyle(buttonEl)
.getPropertyValue("--calcite-color-background-transparent-hover"),
active: window.getComputedStyle(buttonEl).getPropertyValue("--calcite-color-background-transparent-press"),
hoverFocus: window.getComputedStyle(buttonEl).getPropertyValue("--calcite-color-transparent-hover"),
active: window.getComputedStyle(buttonEl).getPropertyValue("--calcite-color-transparent-press"),
};
});
expect(buttonStyles.hoverFocus).toEqual("rgba(34, 23, 200, 0.4)");
Expand Down Expand Up @@ -534,7 +532,7 @@ describe("calcite-button", () => {
html: `
<style>
:root {
--calcite-color-background-transparent-hover: ${overrideStyle};
--calcite-color-transparent-hover: ${overrideStyle};
}
</style>
<div>${buttonSnippet}</div>`,
Expand Down
16 changes: 8 additions & 8 deletions packages/calcite-components/src/components/button/button.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -337,17 +337,17 @@
&:hover {
@apply border-color-danger-hover;
color: theme("colors.danger-hover");
box-shadow: inset 0 0 0 1px var(--calcite-color-danger-hover);
box-shadow: inset 0 0 0 1px var(--calcite-color-status-danger-hover);
}
&:focus {
@apply border-color-danger;
color: theme("colors.danger");
box-shadow: inset 0 0 0 2px var(--calcite-color-danger);
box-shadow: inset 0 0 0 2px var(--calcite-color-status-danger);
}
&:active {
@apply border-color-danger-press;
color: theme("colors.danger-press");
box-shadow: inset 0 0 0 2px var(--calcite-color-danger-press);
box-shadow: inset 0 0 0 2px var(--calcite-color-status-danger-press);
}
calcite-loader {
color: theme("colors.danger");
Expand Down Expand Up @@ -435,17 +435,17 @@
&:hover {
@apply border-color-danger-hover;
color: theme("colors.danger-hover");
box-shadow: inset 0 0 0 1px var(--calcite-color-danger-hover);
box-shadow: inset 0 0 0 1px var(--calcite-color-status-danger-hover);
}
&:focus {
@apply border-color-danger;
color: theme("colors.danger");
box-shadow: inset 0 0 0 2px var(--calcite-color-danger);
box-shadow: inset 0 0 0 2px var(--calcite-color-status-danger);
}
&:active {
@apply border-color-danger-press;
color: theme("colors.danger-press");
box-shadow: inset 0 0 0 2px var(--calcite-color-danger-press);
box-shadow: inset 0 0 0 2px var(--calcite-color-status-danger-press);
}
calcite-loader {
color: theme("colors.danger");
Expand Down Expand Up @@ -513,10 +513,10 @@
@apply bg-transparent;
&:hover,
&:focus {
background-color: var(--calcite-color-background-transparent-hover);
background-color: var(--calcite-color-transparent-hover);
}
&:active {
background-color: var(--calcite-color-background-transparent-press);
background-color: var(--calcite-color-transparent-press);
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion packages/calcite-components/src/components/chip/chip.e2e.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -194,7 +194,7 @@ describe("calcite-chip", () => {
html: `
<style>
:root {
--calcite-color-background-transparent-hover: ${overrideStyle};
--calcite-color-transparent-hover: ${overrideStyle};
}
</style>
<div>${chipSnippet}</div>`,
Expand Down
4 changes: 2 additions & 2 deletions packages/calcite-components/src/components/chip/chip.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -165,8 +165,8 @@
border-radius: 50%;
align-content: center;
justify-content: center;
--calcite-chip-transparent-hover: var(--calcite-color-background-transparent-hover);
--calcite-chip-transparent-press: var(--calcite-color-background-transparent-press);
--calcite-chip-transparent-hover: var(--calcite-color-transparent-hover);
--calcite-chip-transparent-press: var(--calcite-color-transparent-press);
&:hover {
background-color: var(--calcite-chip-transparent-hover);
}
Expand Down
2 changes: 1 addition & 1 deletion packages/calcite-components/src/components/color-picker-swatch/color-picker-swatch.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ $size-l: 28px;
}

line {
stroke: var(--calcite-color-danger);
stroke: var(--calcite-color-status-danger);
}
}

Expand Down
4 changes: 2 additions & 2 deletions packages/calcite-components/src/components/combobox/combobox.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ import { ComboboxChildSelector, ComboboxItem, ComboboxItemGroup, CSS } from "./r
import { getItemAncestors, getItemChildren, hasActiveChildren, isSingleLike } from "./utils";
import { XButton, CSS as XButtonCSS } from "../functional/XButton";
import { getIconScale } from "../../utils/component";
import { calciteSize_15 } from "@esri/calcite-design-tokens/dist/es6/core";
import { calciteSize48 } from "@esri/calcite-design-tokens/dist/es6/core.js";

interface ItemData {
label: string;
Expand Down Expand Up @@ -872,7 +872,7 @@ export class Combobox
const chipContainerElWidth = getElementWidth(chipContainerEl);
const { fontSize, fontFamily } = getComputedStyle(textInput);
const inputTextWidth = getTextWidth(placeholder, `${fontSize} ${fontFamily}`);
const inputWidth = (inputTextWidth || parseInt(calciteSize_15)) + chipContainerElGap;
const inputWidth = (inputTextWidth || parseInt(calciteSize48)) + chipContainerElGap;
const allSelectedIndicatorChipElWidth = getElementWidth(allSelectedIndicatorChipEl);
const selectedIndicatorChipElWidth = getElementWidth(selectedIndicatorChipEl);
const largestSelectedIndicatorChipWidth = Math.max(
Expand Down
6 changes: 3 additions & 3 deletions packages/calcite-components/src/components/input-message/input-message.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,15 +33,15 @@
}

:host([status="invalid"]) .calcite-input-message-icon {
color: var(--calcite-color-danger);
color: var(--calcite-color-status-danger);
}

:host([status="warning"]) .calcite-input-message-icon {
color: var(--calcite-color-warning);
color: var(--calcite-color-status-warning);
}

:host([status="valid"]) .calcite-input-message-icon {
color: var(--calcite-color-success);
color: var(--calcite-color-status-success);
}

:host([status="idle"]) .calcite-input-message-icon {
Expand Down
Loading

0 comments on commit 8d7cf3f

Please sign in to comment.