Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(statuslight)!: migrate statuslight to core tokens #1495

Merged
merged 21 commits into from
Sep 21, 2022
Merged

feat(statuslight)!: migrate statuslight to core tokens #1495

Changes from 1 commit
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
a0a477a
feat(statuslight)!: migrate statuslight to core tokens
Aug 8, 2022
b7a315a
feat: update index.css styles
Aug 8, 2022
eaab326
chore: remove disabled state
Aug 8, 2022
071f5fb
feat: colors
Aug 8, 2022
f5d0b5d
feat: add corner radius
Aug 8, 2022
3a49a45
fix: update semantic colors
Aug 8, 2022
9bd382b
chore: remove disable state
Aug 8, 2022
a881101
chore: remove deprecated active state
Aug 8, 2022
6e7ef82
fix: adjust content spacing
Aug 8, 2022
80074c2
fix: add missing colors
Aug 9, 2022
b84b361
fix: adjust dot to top spacing with calc
Aug 9, 2022
30ee074
refactor: organize colors
Aug 9, 2022
2e155c5
feat: add bottom to label spacing
Aug 9, 2022
ac77743
feat: add highcontrast and modifier tokens
Aug 10, 2022
a241d9b
chore: remove skin.css
Aug 15, 2022
df300cb
chore(statuslight): manual version bump for beta release
pfulton Aug 16, 2022
3a1216f
chore: update tokens to 1.0.7
Aug 29, 2022
4d5d759
refactor: use semantic color aliases
Aug 29, 2022
5ec8a5e
refactor: use nonsemanti aslias colors tokens
Aug 29, 2022
15228c3
chore(statuslight): manual version bump for beta release
pfulton Aug 29, 2022
6872fc6
chore(statuslight): use latest tokens package and fix casing
pfulton Sep 21, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
feat: colors
  • Loading branch information
@pfulton
Yosevu Kilonzo authored and pfulton committed Sep 21, 2022
commit 071f5fbf171763c13f1751fa219dcfdc2a465413
70 changes: 49 additions & 21 deletions components/statuslight/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,34 @@ governing permissions and limitations under the License.
--spectrum-statuslight-spacing-top-to-dot: var(--spectrum-status-light-top-to-dot-medium);
--spectrum-statuslight-spacing-top-to-label: var(--spectrum-component-top-to-text-100);
/* --spectrum-statuslight-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-100); */

/* Color */
--spectrum-statuslight-subdued-content-color-default: var(--spectrum-neutral-subdued-content-color-default);
--spectrum-statuslight-content-color-default: var(--spectrum-neutral-content-color-default);
--spectrum-statuslight-semantic-gray-color: var(--spectrum-gray-500);
--spectrum-statuslight-semantic-accent-color: var(--spectrum-accent-800);
--spectrum-informative-800: blue;
--spectrum-negative-800: red;
--spectrum-notice-600: orange;
--spectrum-positive-700: lightgreen;
--spectrum-statuslight-semantic-negative-color: var(--spectrum-negative-800);
--spectrum-statuslight-semantic-informative-color: var(--spectrum-informative-800);
--spectrum-statuslight-semantic-notice-color: var(--spectrum-notice-600);
--spectrum-statuslight-semantic-positive-color: var(--spectrum-positive-700);
--spectrum-statuslight-nonsemantic-gray-color: var(--spectrum-gray-500);
--spectrum-statuslight-nonsemantic-red-color: var(--spectrum-red-800);
--spectrum-statuslight-nonsemantic-orange-color: var(--spectrum-orange-600);
--spectrum-statuslight-nonsemantic-yellow-color: var(--spectrum-yellow-600);
--spectrum-statuslight-nonsemantic-chartreuse-color: var(--spectrum-chartreuse-600);
--spectrum-statuslight-nonsemantic-celery-color: var(--spectrum-celery-700);
--spectrum-statuslight-nonsemantic-green-color: var(--spectrum-green-700);
--spectrum-statuslight-nonsemantic-seafoam-color: var(--spectrum-seafoam-700);
--spectrum-statuslight-nonsemantic-cyan-color: var(--spectrum-cyan-600);
--spectrum-statuslight-nonsemantic-blue-color: var(--spectrum-blue-800);
--spectrum-statuslight-nonsemantic-indigo-color: var(--spectrum-indigo-800);
--spectrum-statuslight-nonsemantic-purple-color: var(--spectrum-purple-800);
--spectrum-statuslight-nonsemantic-fuchsia-color: var(--spectrum-fuchsia-800);
--spectrum-statuslight-nonsemantic-magenta-color: var(--spectrum-magenta-800);
}

.spectrum-StatusLight--sizeS {
Expand Down Expand Up @@ -76,10 +104,10 @@ governing permissions and limitations under the License.
@media (forced-colors: active) {
pfulton marked this conversation as resolved.
Show resolved Hide resolved
.spectrum-StatusLight {
forced-color-adjust: none;
--spectrum-statuslight-m-info-text-color: CanvasText;
--spectrum-statuslight-m-neutral-text-color: CanvasText;
--spectrum-statuslight-m-info-text-color-disabled: GrayText;
--spectrum-statuslight-m-info-dot-color-disabled: GrayText;
/* --spectrum-statuslight-m-info-text-color: CanvasText; */
/* --spectrum-statuslight-m-neutral-text-color: CanvasText; */
/* --spectrum-statuslight-m-info-text-color-disabled: GrayText; */
/* --spectrum-statuslight-m-info-dot-color-disabled: GrayText; */
&:before {
border: 1px solid ButtonText;
}
Expand All @@ -104,6 +132,8 @@ governing permissions and limitations under the License.

line-height: var(--spectrum-statuslight-line-height);

color: var(--spectrum-statuslight-content-color-default);

&:lang(ja),
&:lang(zh),
&:lang(ko) {
Expand All @@ -129,68 +159,66 @@ governing permissions and limitations under the License.
-ms-high-contrast-adjust: none;
forced-color-adjust: none;
}

color: var(--spectrum-statuslight-m-info-text-color);

}

.spectrum-StatusLight--neutral {
font-style: italic;
}

.spectrum-StatusLight--negative::before {
background-color: var(--spectrum-statuslight-m-negative-dot-color);
background-color: var(--spectrum-statuslight-semantic-negative-color);
}

.spectrum-StatusLight--notice::before {
background-color: var(--spectrum-statuslight-m-notice-dot-color);
background-color: var(--spectrum-statuslight-semantic-notice-color);
}

.spectrum-StatusLight--positive::before {
background-color: var(--spectrum-statuslight-m-positive-dot-color);
background-color: var(--spectrum-statuslight-semantic-positive-color);
}

.spectrum-StatusLight--info::before,
/** @deprecated */.spectrum-StatusLight--active::before {
background-color: var(--spectrum-statuslight-m-info-dot-color);
background-color: var(--spectrum-statuslight-semantic-informative-color);
}

.spectrum-StatusLight--neutral {
color: var(--spectrum-statuslight-m-neutral-text-color);
color: var(--spectrum-statuslight-subdued-content-color-default);

&::before {
background-color: var(--spectrum-statuslight-m-neutral-dot-color);
background-color: var(--spectrum-statuslight-semantic-gray-color);
}
}

.spectrum-StatusLight--celery::before {
background-color: var(--spectrum-statuslight-m-celery-dot-color);
background-color: var(--spectrum-statuslight-nonsemantic-celery-color);
}

.spectrum-StatusLight--yellow::before {
background-color: var(--spectrum-statuslight-m-yellow-dot-color);
background-color: var(--spectrum-statuslight-nonsemantic-yellow-color);
}

.spectrum-StatusLight--fuchsia::before {
background-color: var(--spectrum-statuslight-m-fuchsia-dot-color);
background-color: var(--spectrum-statuslight-nonsemantic-fuchsia-color);
}

.spectrum-StatusLight--indigo::before {
background-color: var(--spectrum-statuslight-m-indigo-dot-color);
background-color: var(--spectrum-statuslight-nonsemantic-indigo-color);
}

.spectrum-StatusLight--seafoam::before {
background-color: var(--spectrum-statuslight-m-seafoam-dot-color);
background-color: var(--spectrum-statuslight-nonsemantic-seafoam-color);
}

.spectrum-StatusLight--chartreuse::before {
background-color: var(--spectrum-statuslight-m-chartreuse-dot-color);
background-color: var(--spectrum-statuslight-nonsemantic-chartreuse-color);
}

.spectrum-StatusLight--magenta::before {
background-color: var(--spectrum-statuslight-m-magenta-dot-color);
background-color: var(--spectrum-statuslight-nonsemantic-magenta-color);
}

.spectrum-StatusLight--purple::before {
background-color: var(--spectrum-statuslight-m-purple-dot-color);
background-color: var(--spectrum-statuslight-nonsemantic-purple-color);
}