-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
* feat: CMD-182 use tokens core-v3 * build: CMD-182 tokens core-v3 light * chore: CMD-182 delete dist of deleted files * enhance: CMD-182 revise color grid - add fifth accent - flatten color token names * enhance: CMD-182 revise color grid - add fifth accent - flatten color token names * feat: deprecate alt/weak accent colors These are like the values TACC/tup-ui uses. * enhance: std message colors for portals * build: std message colors for portals * fix: CMD-182 revert color grid, keep new names * refactor: brand color tokens v1, v2, v3, ds * fix: CMD-182 revert from v3 to v2 (prep for merge) Prepare to merge to base, then return to v3 a smarter way. * chore: CMD-182 remove explicit v2 dist
- Loading branch information
There are no files selected for viewing
Large diffs are not rendered by default.
Large diffs are not rendered by default.
Large diffs are not rendered by default.
Large diffs are not rendered by default.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
This file was deleted.
This file was deleted.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,2 +1,21 @@ | ||
/* Support the default accent color in all the scopes */ | ||
@import url("./color--demo.css"); | ||
@import url("../settings/color.accent.css"); | ||
@import url("../objects/o-section.selectors.css"); | ||
@import url("../components/c-card.selectors.css"); | ||
|
||
/* Set scope for accent colors */ | ||
|
||
@custom-selector :--light-context | ||
.c-recognition--style-light, | ||
:--o-section--muted, | ||
:--o-section--light, | ||
:--c-card--standard, | ||
:--c-card--standard-N, | ||
:--c-card--plain; | ||
@custom-selector :--dark-context | ||
.c-recognition--style-dark, | ||
:--o-section--dark; | ||
|
||
@custom-selector :--light-context-safe | ||
:where(:--dark-context :--light-context); | ||
@custom-selector :--dark-context-safe | ||
:where(:--dark-context:not(:--light-context *)); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,28 +1 @@ | ||
@import url("../objects/o-section.selectors.css"); | ||
@import url("../components/c-card.selectors.css"); | ||
|
||
|
||
|
||
/* Load accent colors without scope */ | ||
|
||
@import url("../settings/color.accent--blue.css"); | ||
|
||
|
||
|
||
/* Set scope for accent colors */ | ||
|
||
@custom-selector :--light-context | ||
.c-recognition--style-light, | ||
:--o-section--muted, | ||
:--o-section--light, | ||
:--c-card--standard, | ||
:--c-card--standard-N, | ||
:--c-card--plain; | ||
@custom-selector :--dark-context | ||
.c-recognition--style-dark, | ||
:--o-section--dark; | ||
|
||
@custom-selector :--light-context-safe | ||
:where(:--dark-context :--light-context); | ||
@custom-selector :--dark-context-safe | ||
:where(:--dark-context:not(:--light-context *)); | ||
@import url("./color--cms.css"); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,7 +1,5 @@ | ||
/* Load accent colors without scope */ | ||
@import url("../settings/color.accent--purple.css"); | ||
@import url("../settings/color.accent.css"); | ||
|
||
/* Set scope for accent colors */ | ||
/* Override accent colors from base */ | ||
@custom-selector :--light-context-safe | ||
:root; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,40 +1,18 @@ | ||
/* Load accent colors without scope */ | ||
@import url("../settings/color.accent--purple.css"); | ||
@import url("../settings/color.accent.css"); | ||
|
||
@design-tokens url('../../tokens/Tokens.core-v2.Light.tokens.json') format('style-dictionary3'); | ||
|
||
/* Set scope for accent colors */ | ||
/* Override accent colors from base */ | ||
@custom-selector :--light-context-safe | ||
:root; | ||
|
||
/* Override other colors from base */ | ||
/* FAQ: Updating portal colors was delayed (to reduce complexity of TUP redesign) */ | ||
:root { | ||
/* TODO: Update clients to use --global-color-accent--xx-light instead */ | ||
--global-color-accent--alt: #d2cce7; | ||
/* TODO: Update clients to use --global-color-accent--x-light instead */ | ||
--global-color-accent--weak: #6039cc40; /* similar to #E3D7FD on #f4f4f4 */ | ||
|
||
--global-color-success--x-light: #E7F9E5; | ||
--global-color-success--light: #AFECA7; | ||
--global-color-success--normal: #43d130; | ||
--global-color-success--dark: #237119; | ||
--global-color-success--x-dark: #263824; | ||
|
||
--global-color-success--weak: #43d13020; | ||
|
||
--global-color-warning--x-light: #FDFDEA; | ||
--global-color-warning--light: #F2F06F; | ||
--global-color-warning--normal: #E9E000; | ||
--global-color-warning--dark: #735911; | ||
--global-color-warning--x-dark: #3A3320; | ||
|
||
--global-color-warning--weak: #DFA70C20; | ||
|
||
--global-color-danger--x-light: #FDF1F1; | ||
--global-color-danger--light: #F8C9C9; | ||
--global-color-danger--normal: #F09393; | ||
--global-color-danger--dark: #AF1818; | ||
--global-color-danger--x-dark: #3C3030; | ||
|
||
--global-color-danger--weak: #F0939320; | ||
/* DEPRECATED */ | ||
--global-color-accent--alt: var(--global-color-accent--light); | ||
--global-color-accent--weak: var(--global-color-accent--x-light); | ||
--global-color-success--weak: rgb( from design-token('color.success.medium') r g b / 0.5); | ||
--global-color-warning--weak: rgb( from design-token('color.warning.medium') r g b / 0.5); | ||
--global-color-danger--weak: rgb( from design-token('color.danger.medium') r g b / 0.5); | ||
} |