diff --git a/.changeset/proud-scissors-compete.md b/.changeset/proud-scissors-compete.md new file mode 100644 index 0000000000..85b1168208 --- /dev/null +++ b/.changeset/proud-scissors-compete.md @@ -0,0 +1,5 @@ +--- +"@primer/css": major +--- + +Update utilities diff --git a/docs/content/support/v18-migration.mdx b/docs/content/support/v18-migration.mdx index 6cdda88d7a..7bd998414f 100644 --- a/docs/content/support/v18-migration.mdx +++ b/docs/content/support/v18-migration.mdx @@ -43,21 +43,21 @@ See [color utility classes](/utilities/colors) for a list of all the functional ### Border -| `v16` | `v18` | -| ------------------------- | ------------------------- | -| `.color-border-primary` | `.color-border-default` | -| `.color-border-secondary` | `.color-border-muted` | -| `.color-border-tertiary` | `.color-border-default` | -| `.color-border-inverse` | n/a | -| `.color-border-info` | `.color-border-accent` | -| `.color-border-warning` | `.color-border-attention` | +| `v16` | `v18` | +| ------------------------- | ---------------------------------- | +| `.color-border-primary` | `.color-border-default` | +| `.color-border-secondary` | `.color-border-muted` | +| `.color-border-tertiary` | `.color-border-default` | +| `.color-border-inverse` | n/a | +| `.color-border-info` | `.color-border-accent-emphasis` | +| `.color-border-warning` | `.color-border-attention-emphasis` | ### Background | `v16` | `v18` | | --------------------------- | ------------------------------ | | `.color-bg-canvas` | `.color-bg-default` | -| `.color-bg-canvas-inverse` | `.color-bg-neutral-emphasis` | +| `.color-bg-canvas-inverse` | `.color-bg-emphasis` | | `.color-bg-canvas-inset` | `.color-bg-inset` | | `.color-bg-primary` | `.color-bg-default` | | `.color-bg-secondary` | `.color-bg-subtle` | diff --git a/docs/content/utilities/colors.mdx b/docs/content/utilities/colors.mdx index b779cc4630..d777600e0d 100644 --- a/docs/content/utilities/colors.mdx +++ b/docs/content/utilities/colors.mdx @@ -44,40 +44,29 @@ Background colors are most commonly used for filling large blocks of content or
.color-bg-default
.color-bg-overlay
.color-bg-inset
-
.color-bg-subtle
+
.color-bg-subtle
+
.color-bg-emphasis
-
.color-bg-neutral-emphasis-plus
-
.color-bg-neutral-emphasis
-
.color-bg-neutral-muted
-
.color-bg-neutral-subtle
+
.color-bg-accent
+
.color-bg-accent-emphasis
-
.color-bg-accent-emphasis
-
.color-bg-accent-muted
-
.color-bg-accent-subtle
+
.color-bg-success
+
.color-bg-success-emphasis
-
.color-bg-success-emphasis
-
.color-bg-success-muted
-
.color-bg-success-subtle
+
.color-bg-attention
+
.color-bg-attention-emphasis
-
.color-bg-attention-emphasis
-
.color-bg-attention-muted
-
.color-bg-attention-subtle
+
.color-bg-severe
+
.color-bg-severe-emphasis
-
.color-bg-severe-emphasis
-
.color-bg-severe-muted
-
.color-bg-severe-subtle
+
.color-bg-danger
+
.color-bg-danger-emphasis
-
.color-bg-danger-emphasis
-
.color-bg-danger-muted
-
.color-bg-danger-subtle
+
.color-bg-done
+
.color-bg-done-emphasis
-
.color-bg-done-emphasis
-
.color-bg-done-muted
-
.color-bg-done-subtle
- -
.color-bg-sponsors-emphasis
-
.color-bg-sponsors-muted
-
.color-bg-sponsors-subtle
+
.color-bg-sponsors
+
.color-bg-sponsors-emphasis
``` ## Border @@ -90,12 +79,25 @@ Override default border colors with the following utilities.
.color-border-subtle
.color-border-accent
+
.color-border-accent-emphasis
+
.color-border-success
+
.color-border-success-emphasis
+
.color-border-attention
+
.color-border-attention-emphasis
+
.color-border-severe
+
.color-border-severe-emphasis
+
.color-border-danger
+
.color-border-danger-emphasis
+
.color-border-done
-
.color-border-sponsors
+
.color-border-done-emphasis
+ +
.color-border-sponsors
+
.color-border-sponsors-emphasis
``` ## Link diff --git a/src/deprecations.json b/src/deprecations.json index e2a94205c2..2e103efd46 100644 --- a/src/deprecations.json +++ b/src/deprecations.json @@ -20,10 +20,10 @@ "color-border-secondary": "color-border-muted", "color-border-tertiary": "color-border-default", "color-border-inverse": null, - "color-border-info": "color-border-accent", - "color-border-warning": "color-border-attention", + "color-border-info": "color-border-accent-emphasis", + "color-border-warning": "color-border-attention-emphasis", "color-bg-canvas": "color-bg-default", - "color-bg-canvas-inverse": "color-bg-neutral-emphasis", + "color-bg-canvas-inverse": "color-bg-emphasis", "color-bg-canvas-inset": "color-bg-inset", "color-bg-primary": "color-bg-default", "color-bg-secondary": "color-bg-subtle", diff --git a/src/utilities/colors.scss b/src/utilities/colors.scss index fc7cc9899f..248f89c606 100644 --- a/src/utilities/colors.scss +++ b/src/utilities/colors.scss @@ -18,43 +18,32 @@ // Background -.color-bg-default { background-color: var(--color-canvas-default) !important; } -.color-bg-overlay { background-color: var(--color-canvas-overlay) !important; } -.color-bg-inset { background-color: var(--color-canvas-inset) !important; } -.color-bg-subtle { background-color: var(--color-canvas-subtle) !important; } - -.color-bg-neutral-emphasis-plus { background-color: var(--color-neutral-emphasis-plus) !important; } -.color-bg-neutral-emphasis { background-color: var(--color-neutral-emphasis) !important; } -.color-bg-neutral-muted { background-color: var(--color-neutral-muted) !important; } -.color-bg-neutral-subtle { background-color: var(--color-neutral-subtle) !important; } +.color-bg-default { background-color: var(--color-canvas-default) !important; } +.color-bg-overlay { background-color: var(--color-canvas-overlay) !important; } +.color-bg-inset { background-color: var(--color-canvas-inset) !important; } +.color-bg-subtle { background-color: var(--color-canvas-subtle) !important; } +.color-bg-emphasis { background-color: var(--color-neutral-emphasis-plus) !important; } +.color-bg-accent { background-color: var(--color-accent-subtle) !important; } .color-bg-accent-emphasis { background-color: var(--color-accent-emphasis) !important; } -.color-bg-accent-muted { background-color: var(--color-accent-muted) !important; } -.color-bg-accent-subtle { background-color: var(--color-accent-subtle) !important; } +.color-bg-success { background-color: var(--color-success-subtle) !important; } .color-bg-success-emphasis { background-color: var(--color-success-emphasis) !important; } -.color-bg-success-muted { background-color: var(--color-success-muted) !important; } -.color-bg-success-subtle { background-color: var(--color-success-subtle) !important; } +.color-bg-attention { background-color: var(--color-attention-subtle) !important; } .color-bg-attention-emphasis { background-color: var(--color-attention-emphasis) !important; } -.color-bg-attention-muted { background-color: var(--color-attention-muted) !important; } -.color-bg-attention-subtle { background-color: var(--color-attention-subtle) !important; } +.color-bg-severe { background-color: var(--color-severe-subtle) !important; } .color-bg-severe-emphasis { background-color: var(--color-severe-emphasis) !important; } -.color-bg-severe-muted { background-color: var(--color-severe-muted) !important; } -.color-bg-severe-subtle { background-color: var(--color-severe-subtle) !important; } +.color-bg-danger { background-color: var(--color-danger-subtle) !important; } .color-bg-danger-emphasis { background-color: var(--color-danger-emphasis) !important; } -.color-bg-danger-muted { background-color: var(--color-danger-muted) !important; } -.color-bg-danger-subtle { background-color: var(--color-danger-subtle) !important; } +.color-bg-done { background-color: var(--color-done-subtle) !important; } .color-bg-done-emphasis { background-color: var(--color-done-emphasis) !important; } -.color-bg-done-muted { background-color: var(--color-done-muted) !important; } -.color-bg-done-subtle { background-color: var(--color-done-subtle) !important; } +.color-bg-sponsors { background-color: var(--color-sponsors-subtle) !important; } .color-bg-sponsors-emphasis { background-color: var(--color-sponsors-emphasis) !important; } -.color-bg-sponsors-muted { background-color: var(--color-sponsors-muted) !important; } -.color-bg-sponsors-subtle { background-color: var(--color-sponsors-subtle) !important; } // Border @@ -62,13 +51,26 @@ .color-border-muted { border-color: var(--color-border-muted) !important; } .color-border-subtle { border-color: var(--color-border-subtle) !important; } -.color-border-accent { border-color: var(--color-accent-emphasis) !important; } -.color-border-success { border-color: var(--color-success-emphasis) !important; } -.color-border-attention { border-color: var(--color-attention-emphasis) !important; } -.color-border-severe { border-color: var(--color-severe-emphasis) !important; } -.color-border-danger { border-color: var(--color-danger-emphasis) !important; } -.color-border-done { border-color: var(--color-done-emphasis) !important; } -.color-border-sponsors { border-color: var(--color-sponsors-emphasis) !important; } +.color-border-accent { border-color: var(--color-accent-muted) !important; } +.color-border-accent-emphasis { border-color: var(--color-accent-emphasis) !important; } + +.color-border-success { border-color: var(--color-success-muted) !important; } +.color-border-success-emphasis { border-color: var(--color-success-emphasis) !important; } + +.color-border-attention { border-color: var(--color-attention-muted) !important; } +.color-border-attention-emphasis { border-color: var(--color-attention-emphasis) !important; } + +.color-border-severe { border-color: var(--color-severe-muted) !important; } +.color-border-severe-emphasis { border-color: var(--color-severe-emphasis) !important; } + +.color-border-danger { border-color: var(--color-danger-muted) !important; } +.color-border-danger-emphasis { border-color: var(--color-danger-emphasis) !important; } + +.color-border-done { border-color: var(--color-done-muted) !important; } +.color-border-done-emphasis { border-color: var(--color-done-emphasis) !important; } + +.color-border-sponsors { border-color: var(--color-sponsors-muted) !important; } +.color-border-sponsors-emphasis { border-color: var(--color-sponsors-emphasis) !important; } // Misc