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

Show file tree
Hide file tree
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
fix: add missing colors
  • Loading branch information
@pfulton
Yosevu Kilonzo authored and pfulton committed Sep 21, 2022
commit 80074c2aaeed87944ad171351a1685fddff9eaa6
44 changes: 34 additions & 10 deletions components/statuslight/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,19 +23,20 @@ governing permissions and limitations under the License.
--spectrum-statuslight-font-size: var(--spectrum-font-size-100);

/* Space */
/* --spectrum-statuslight-info-dot-resolved-margin-top: calc(var(--spectrum-statuslight-info-dot-margin-top) - var(--spectrum-statuslight-info-text-padding-top)); */
--spectrum-statuslight-spacing-dot-to-label: var(--spectrum-text-to-visual-100);
--spectrum-statuslight-spacing-top-to-dot: var(--spectrum-status-light-top-to-dot-medium);
/* --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); */

--spectrum-statuslight-spacing-top-to-dot: calc(var(--spectrum-status-light-top-to-dot-medium) - var(--spectrum-component-top-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-color-800);
--spectrum-statuslight-semantic-negative-color: var(--spectrum-negative-color-800);
--spectrum-statuslight-semantic-informative-color: var(--spectrum-informative-color-800);
--spectrum-statuslight-semantic-info-color: var(--spectrum-informative-color-800);
--spectrum-statuslight-semantic-notice-color: var(--spectrum-notice-color-600);
--spectrum-statuslight-semantic-positive-color: var(--spectrum-positive-color-700);
--spectrum-statuslight-nonsemantic-gray-color: var(--spectrum-gray-500);
Expand Down Expand Up @@ -158,14 +159,14 @@ governing permissions and limitations under the License.
}
}

.spectrum-StatusLight-label {
margin-block-start: var(--spectrum-statuslight-spacing-top-to-label);
}

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

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

.spectrum-StatusLight--negative::before {
background-color: var(--spectrum-statuslight-semantic-negative-color);
}
Expand All @@ -178,9 +179,8 @@ governing permissions and limitations under the License.
background-color: var(--spectrum-statuslight-semantic-positive-color);
}

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

.spectrum-StatusLight--neutral {
Expand All @@ -191,6 +191,30 @@ governing permissions and limitations under the License.
}
}

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

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

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

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

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

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

.spectrum-StatusLight--celery::before {
background-color: var(--spectrum-statuslight-nonsemantic-celery-color);
}
Expand Down
20 changes: 16 additions & 4 deletions components/statuslight/metadata/statuslight.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,24 +14,24 @@ examples:
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">S</h4>

<div class="spectrum-StatusLight spectrum-StatusLight--sizeS spectrum-StatusLight--info"><span class="spectrum-StatusLight-label">Small</span></div>
<div class="spectrum-StatusLight spectrum-StatusLight--sizeS spectrum-StatusLight--info">Small</div>
</div>
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">M (default)</h4>

<div class="spectrum-StatusLight spectrum-StatusLight--sizeM spectrum-StatusLight--info"><span class="spectrum-StatusLight-label">Medium</span></div>
<div class="spectrum-StatusLight spectrum-StatusLight--sizeM spectrum-StatusLight--info">Medium</div>
</div>

<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">L</h4>

<div class="spectrum-StatusLight spectrum-StatusLight--sizeL spectrum-StatusLight--info"><span class="spectrum-StatusLight-label">Large</span></div>
<div class="spectrum-StatusLight spectrum-StatusLight--sizeL spectrum-StatusLight--info">Large</div>
</div>

<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">XL</h4>

<div class="spectrum-StatusLight spectrum-StatusLight--sizeXL spectrum-StatusLight--info"><span class="spectrum-StatusLight-label">Extra Large</span></div>
<div class="spectrum-StatusLight spectrum-StatusLight--sizeXL spectrum-StatusLight--info">Extra Large</div>
</div>
</div>
- id: statuslight-wrapping
Expand All @@ -44,6 +44,13 @@ examples:
name: Colors
status: Verified
markup: |
<div class="spectrum-StatusLight spectrum-StatusLight--sizeS spectrum-StatusLight--gray">Gray Status</div>
<div class="spectrum-StatusLight spectrum-StatusLight--sizeS spectrum-StatusLight--red">Red Status</div>
<div class="spectrum-StatusLight spectrum-StatusLight--sizeS spectrum-StatusLight--orange">Orange Status</div>
<div class="spectrum-StatusLight spectrum-StatusLight--sizeS spectrum-StatusLight--green">Green Status</div>
<div class="spectrum-StatusLight spectrum-StatusLight--sizeS spectrum-StatusLight--cyan">Cyan Status</div>
<div class="spectrum-StatusLight spectrum-StatusLight--sizeS spectrum-StatusLight--blue">Blue Status</div>

<div class="spectrum-StatusLight spectrum-StatusLight--sizeS spectrum-StatusLight--celery">Celery Status</div>
<div class="spectrum-StatusLight spectrum-StatusLight--sizeS spectrum-StatusLight--yellow">Yellow Status</div>
<div class="spectrum-StatusLight spectrum-StatusLight--sizeS spectrum-StatusLight--fuchsia">Fuchsia Status</div>
Expand All @@ -57,6 +64,11 @@ examples:
status: Verified
markup: |
<div class="spectrum-StatusLight spectrum-StatusLight--sizeS spectrum-StatusLight--neutral">Paused</div>
- id: statuslight-accent
name: Accent
status: Verified
markup: |
<div class="spectrum-StatusLight spectrum-StatusLight--sizeS spectrum-StatusLight--accent">Accent</div>
- id: statuslight-info
name: Info
status: Verified
Expand Down