+
Skip to content
This repository was archived by the owner on Oct 14, 2025. It is now read-only.
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
59 changes: 59 additions & 0 deletions .changeset/fluffy-actors-arrive.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
---
'@crowdstrike/glide-core': patch
---

`@crowdstrike/glide-core/styles/variables.css` has been updated with the `data-viz` colors from Figma:

## Light

### Added

```diff
+ --glide-core-data-viz-cobalt-cobalt: #5183df;
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks pretty odd to have the repeated name here (e.g., cobalt-cobalt), but it's due to the way they're structured on the Figma side. Talking with Zheng, these should get a lot simpler in our next major iteration on tokens, but this is what we have to roll with for now.

+ --glide-core-data-viz-cyan-cyan: #299ed1;
+ --glide-core-data-viz-gold-gold: #cc8519;
+ --glide-core-data-viz-gray-dark: #424242;
+ --glide-core-data-viz-gray-darker: #212121;
+ --glide-core-data-viz-gray-default: #6d6d6d;
+ --glide-core-data-viz-gray-light: #8a8a8a;
+ --glide-core-data-viz-gray-lighter: #c9c9c9;
+ --glide-core-data-viz-gray-lightest: #f0f0f0;
+ --glide-core-data-viz-gray-x-lighter: #e3e3e3;
+ --glide-core-data-viz-indigo-indigo: #6563d9;
+ --glide-core-data-viz-lilac-lilac: #ce66e5;
+ --glide-core-data-viz-magenta-magenta: #f9338b;
+ --glide-core-data-viz-moss-moss: #959328;
+ --glide-core-data-viz-olive-olive: #7f994d;
+ --glide-core-data-viz-red-red: #db2d24;
+ --glide-core-data-viz-rose-rose: #ea5da3;
+ --glide-core-data-viz-teal-teal: #39a288;
+ --glide-core-data-viz-turquoise-turqoise: #339da3;
+ --glide-core-data-viz-violet-violet: #af52de;
```

## Dark

### Added

```diff
+ --glide-core-data-viz-cobalt-cobalt: #6e8ec4;
+ --glide-core-data-viz-cyan-cyan: #4b98b9;
+ --glide-core-data-viz-gold-gold: #b98d4b;
+ --glide-core-data-viz-gray-dark: #424242;
+ --glide-core-data-viz-gray-darker: #212121;
+ --glide-core-data-viz-gray-default: #6d6d6d;
+ --glide-core-data-viz-gray-light: #8a8a8a;
+ --glide-core-data-viz-gray-lighter: #c9c9c9;
+ --glide-core-data-viz-gray-lightest: #000000e5;
+ --glide-core-data-viz-gray-x-lighter: #e3e3e3;
+ --glide-core-data-viz-indigo-indigo: #7574e5;
+ --glide-core-data-viz-lilac-lilac: #b37cc5;
+ --glide-core-data-viz-magenta-magenta: #c2678f;
+ --glide-core-data-viz-moss-moss: #949151;
+ --glide-core-data-viz-olive-olive: #7a845c;
+ --glide-core-data-viz-red-red: #db4743;
+ --glide-core-data-viz-rose-rose: #be7e9f;
+ --glide-core-data-viz-teal-teal: #5c9d8c;
+ --glide-core-data-viz-turquoise-turqoise: #639d9f;
+ --glide-core-data-viz-violet-violet: #a66dc3;
```
16 changes: 16 additions & 0 deletions .changeset/lazy-rockets-admire.md
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wanted to explicitly call out the renamed variables so they aren't lost in the release notes. I'm not married to it, but thought it may be helpful for folks.

Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
---
'@crowdstrike/glide-core': minor
---

The following CSS variables were renamed:

```diff
- --glide-core-background-fill
+ --glide-core-surface-background-image

- --glide-core-border-radius-none
+ --glide-core-border-radius-zero

- --glide-core-border-width-none
+ --glide-core-border-width-zero
```
106 changes: 106 additions & 0 deletions .changeset/rare-scissors-admire.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
---
'@crowdstrike/glide-core': minor
---

`@crowdstrike/glide-core/styles/variables.css` has been updated with the latest from Figma:

## Light

### Added

```diff
+ --glide-core-border-attention: #f8f0d1;
+ --glide-core-border-error: #ffdcda;
+ --glide-core-border-informational: #d7e7ff;
+ --glide-core-border-warning: #ffebce;

+ --glide-core-effects-shadow-small-blur: 0.5rem;
+ --glide-core-effects-shadow-small-fill: #b5b5b540;
+ --glide-core-effects-shadow-small-spread: 0rem;
+ --glide-core-effects-shadow-small-x: 0rem;
+ --glide-core-effects-shadow-small-y: 0.125rem;

+ --glide-core-effects-shadow-switcher-blur: 0.125rem;
+ --glide-core-effects-shadow-switcher-fill: #ffffff59;
+ --glide-core-effects-shadow-switcher-spread: 0rem;
+ --glide-core-effects-shadow-switcher-x: 0.0625rem;
+ --glide-core-effects-shadow-switcher-y: 0.0625rem;

+ --glide-core-surface-background-image: #00000000;
```

### Removed

```diff
- --glide-core-background-fill: #15141400;
- --glide-core-generic-border-active: #6d6d6d;
```

## Dark

### Added

```diff
+ --glide-core-border-attention: #f8f0d1;
+ --glide-core-border-error: #ffdcda;
+ --glide-core-border-informational: #d7e7ff;
+ --glide-core-border-warning: #ffebce;

+ --glide-core-effects-shadow-small-blur: 0.5rem;
+ --glide-core-effects-shadow-small-fill: #00000040;
+ --glide-core-effects-shadow-small-spread: 0rem;
+ --glide-core-effects-shadow-small-x: 0rem;
+ --glide-core-effects-shadow-small-y: 0.125rem;

+ --glide-core-effects-shadow-switcher-blur: 0.125rem;
+ --glide-core-effects-shadow-switcher-fill: #0000000d;
+ --glide-core-effects-shadow-switcher-spread: 0rem;
+ --glide-core-effects-shadow-switcher-x: 0.0625rem;
+ --glide-core-effects-shadow-switcher-y: 0.0625rem;

+ --glide-core-surface-background-image: #151414f7;
```

### Removed

```diff
- --glide-core-background-fill: #151414f7;
- --glide-core-generic-border-active: #6d6d6d;
```

### Changed

```diff
- --glide-core-effects-shadow-large-blur: 3.125rem;
+ --glide-core-effects-shadow-large-blur: 0.75rem;

- --glide-core-effects-shadow-large-y: 0.625rem;
+ --glide-core-effects-shadow-large-y: 0.125rem;
```

## System

### Added

```diff
+ --glide-core-border-radius-zero: 0rem;
+ --glide-core-border-width-zero: 0rem;
```

### Removed

```diff
- --glide-core-border-radius-none: 0rem;
- --glide-core-border-width-none: 0rem;
- --glide-core-number-14: 0.875rem;
- --glide-core-page-size-details-panel: 27.375rem;
```

## Miscellaneous

### Changed

```diff
- --glide-core-shadow-sm: 0px 2.275px 8.342px 0px rgba(181, 181, 181, 0.25);
+ --glide-core-shadow-sm: var(--glide-core-effects-shadow-small-x) var(--glide-core-effects-shadow-small-y) var(--glide-core-effects-shadow-small-blur) var(--glide-core-effects-shadow-small-spread) var(--glide-core-effects-shadow-small-fill);
```
5 changes: 5 additions & 0 deletions .changeset/tasty-bananas-jump.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@crowdstrike/glide-core': patch
---

Tree Item's selected hover background color was updated for more contrast.
5 changes: 5 additions & 0 deletions .changeset/unlucky-falcons-draw.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@crowdstrike/glide-core': patch
---

Dropdown's visual design for "select all" and "add" were reverted back to the previous state after additional design review.
2 changes: 1 addition & 1 deletion .storybook/overrides.css
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
}

.docs-story {
background-color: var(--glide-core-background-fill) !important;
background-color: var(--glide-core-surface-background-image) !important;
}

/* The tooltip shown when `argTypes[key].table.type` is clicked. */
Expand Down
4 changes: 2 additions & 2 deletions src/dropdown.styles.ts
Original file line number Diff line number Diff line change
Expand Up @@ -154,7 +154,7 @@ export default [
}

.footer {
border-block-start: 1px solid var(--glide-core-border-base);
background-color: var(--glide-core-surface-base-gray-lighter);
display: none;
inline-size: calc(100% - var(--glide-core-spacing-xxxs) * 2);
inset-block-end: 0;
Expand Down Expand Up @@ -216,7 +216,7 @@ export default [
}

.select-all {
border-block-end: 1px solid var(--glide-core-border-base);
background-color: var(--glide-core-surface-base-gray-lighter);
padding: var(--glide-core-spacing-xxxs);

&:not([hidden]) {
Expand Down
41 changes: 37 additions & 4 deletions src/styles/variables/dark.css
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@
:host,
.theme-dark {
color-scheme: dark;
--glide-core-background-fill: #151414f7;
--glide-core-border-action: #3989da;
--glide-core-border-action-disabled: #eef5ff;
--glide-core-border-action-hover: #eef5ff;
--glide-core-border-attention: #f8f0d1;
--glide-core-border-base: #585858;
--glide-core-border-base-dark: #8a8a8a;
--glide-core-border-base-darker: #424242;
Expand All @@ -14,23 +14,55 @@
--glide-core-border-base-lightest: #c9c9c9;
--glide-core-border-base-transparent: #ffffff1a;
--glide-core-border-disabled: #8a8a8a;
--glide-core-border-error: #ffdcda;
--glide-core-border-focus: #3989da;
--glide-core-border-focus-light: #eef5ff;
--glide-core-border-informational: #d7e7ff;
--glide-core-border-primary: #424242;
--glide-core-border-primary-hover: #3989da;
--glide-core-border-warning: #ffebce;
--glide-core-data-viz-cobalt-cobalt: #6e8ec4;
--glide-core-data-viz-cyan-cyan: #4b98b9;
--glide-core-data-viz-gold-gold: #b98d4b;
--glide-core-data-viz-gray-dark: #424242;
--glide-core-data-viz-gray-darker: #212121;
--glide-core-data-viz-gray-default: #6d6d6d;
--glide-core-data-viz-gray-light: #8a8a8a;
--glide-core-data-viz-gray-lighter: #c9c9c9;
--glide-core-data-viz-gray-lightest: #000000e5;
--glide-core-data-viz-gray-x-lighter: #e3e3e3;
--glide-core-data-viz-indigo-indigo: #7574e5;
--glide-core-data-viz-lilac-lilac: #b37cc5;
--glide-core-data-viz-magenta-magenta: #c2678f;
--glide-core-data-viz-moss-moss: #949151;
--glide-core-data-viz-olive-olive: #7a845c;
--glide-core-data-viz-red-red: #db4743;
--glide-core-data-viz-rose-rose: #be7e9f;
--glide-core-data-viz-teal-teal: #5c9d8c;
--glide-core-data-viz-turquoise-turqoise: #639d9f;
--glide-core-data-viz-violet-violet: #a66dc3;
--glide-core-effects-shadow-large-background-blur: 12.5rem;
--glide-core-effects-shadow-large-blur: 3.125rem;
--glide-core-effects-shadow-large-blur: 0.75rem;
--glide-core-effects-shadow-large-fill: #00000080;
--glide-core-effects-shadow-large-spread: 0rem;
--glide-core-effects-shadow-large-x: 0rem;
--glide-core-effects-shadow-large-y: 0.625rem;
--glide-core-effects-shadow-large-y: 0.125rem;
--glide-core-effects-shadow-small-blur: 0.5rem;
--glide-core-effects-shadow-small-fill: #00000040;
--glide-core-effects-shadow-small-spread: 0rem;
--glide-core-effects-shadow-small-x: 0rem;
--glide-core-effects-shadow-small-y: 0.125rem;
--glide-core-effects-shadow-switcher-blur: 0.125rem;
--glide-core-effects-shadow-switcher-fill: #0000000d;
--glide-core-effects-shadow-switcher-spread: 0rem;
--glide-core-effects-shadow-switcher-x: 0.0625rem;
--glide-core-effects-shadow-switcher-y: 0.0625rem;
--glide-core-effects-shadow-xlarge-background-blur: 0rem;
--glide-core-effects-shadow-xlarge-blur: 4rem;
--glide-core-effects-shadow-xlarge-fill: #000000f7;
--glide-core-effects-shadow-xlarge-spread: 0rem;
--glide-core-effects-shadow-xlarge-x: 0rem;
--glide-core-effects-shadow-xlarge-y: 0.25rem;
--glide-core-generic-border-active: #6d6d6d;
--glide-core-icon-active: #3989da;
--glide-core-icon-default: #f0f0f0;
--glide-core-icon-default2: #8a8a8a;
Expand Down Expand Up @@ -59,6 +91,7 @@
--glide-core-status-warning-medium: #fad232;
--glide-core-surface-active: #ffffffe5;
--glide-core-surface-attention: #fffbeb;
--glide-core-surface-background-image: #151414f7;
--glide-core-surface-base: #ffffff26;
--glide-core-surface-base-dark: #625c5c;
--glide-core-surface-base-gray: #ffffff1a;
Expand Down
37 changes: 35 additions & 2 deletions src/styles/variables/light.css
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,10 @@
:host,
.theme-light {
color-scheme: light;
--glide-core-background-fill: #15141400;
--glide-core-border-action: #0073e6;
--glide-core-border-action-disabled: #d7e7ff;
--glide-core-border-action-hover: #eef5ff;
--glide-core-border-attention: #f8f0d1;
--glide-core-border-base: #c9c9c9;
--glide-core-border-base-dark: #6d6d6d;
--glide-core-border-base-darker: #424242;
Expand All @@ -15,23 +15,55 @@
--glide-core-border-base-lightest: #ffffff;
--glide-core-border-base-transparent: #0000001a;
--glide-core-border-disabled: #8a8a8a;
--glide-core-border-error: #ffdcda;
--glide-core-border-focus: #0073e6;
--glide-core-border-focus-light: #eef5ff;
--glide-core-border-informational: #d7e7ff;
--glide-core-border-primary: #054fb9;
--glide-core-border-primary-hover: #0461cf;
--glide-core-border-warning: #ffebce;
--glide-core-data-viz-cobalt-cobalt: #5183df;
--glide-core-data-viz-cyan-cyan: #299ed1;
--glide-core-data-viz-gold-gold: #cc8519;
--glide-core-data-viz-gray-dark: #424242;
--glide-core-data-viz-gray-darker: #212121;
--glide-core-data-viz-gray-default: #6d6d6d;
--glide-core-data-viz-gray-light: #8a8a8a;
--glide-core-data-viz-gray-lighter: #c9c9c9;
--glide-core-data-viz-gray-lightest: #f0f0f0;
--glide-core-data-viz-gray-x-lighter: #e3e3e3;
--glide-core-data-viz-indigo-indigo: #6563d9;
--glide-core-data-viz-lilac-lilac: #ce66e5;
--glide-core-data-viz-magenta-magenta: #f9338b;
--glide-core-data-viz-moss-moss: #959328;
--glide-core-data-viz-olive-olive: #7f994d;
--glide-core-data-viz-red-red: #db2d24;
--glide-core-data-viz-rose-rose: #ea5da3;
--glide-core-data-viz-teal-teal: #39a288;
--glide-core-data-viz-turquoise-turqoise: #339da3;
--glide-core-data-viz-violet-violet: #af52de;
--glide-core-effects-shadow-large-background-blur: 12.5rem;
--glide-core-effects-shadow-large-blur: 0.875rem;
--glide-core-effects-shadow-large-fill: #00000040;
--glide-core-effects-shadow-large-spread: 0rem;
--glide-core-effects-shadow-large-x: 0rem;
--glide-core-effects-shadow-large-y: 0.25rem;
--glide-core-effects-shadow-small-blur: 0.5rem;
--glide-core-effects-shadow-small-fill: #b5b5b540;
--glide-core-effects-shadow-small-spread: 0rem;
--glide-core-effects-shadow-small-x: 0rem;
--glide-core-effects-shadow-small-y: 0.125rem;
--glide-core-effects-shadow-switcher-blur: 0.125rem;
--glide-core-effects-shadow-switcher-fill: #ffffff59;
--glide-core-effects-shadow-switcher-spread: 0rem;
--glide-core-effects-shadow-switcher-x: 0.0625rem;
--glide-core-effects-shadow-switcher-y: 0.0625rem;
--glide-core-effects-shadow-xlarge-background-blur: 6.25rem;
--glide-core-effects-shadow-xlarge-blur: 3.75rem;
--glide-core-effects-shadow-xlarge-fill: #adadad;
--glide-core-effects-shadow-xlarge-spread: 0rem;
--glide-core-effects-shadow-xlarge-x: 0rem;
--glide-core-effects-shadow-xlarge-y: 0.25rem;
--glide-core-generic-border-active: #6d6d6d;
--glide-core-icon-active: #0073e6;
--glide-core-icon-default: #212121;
--glide-core-icon-default2: #212121;
Expand Down Expand Up @@ -60,6 +92,7 @@
--glide-core-status-warning-medium: #ffcc00;
--glide-core-surface-active: #ffffff;
--glide-core-surface-attention: #fffbeb;
--glide-core-surface-background-image: #00000000;
--glide-core-surface-base: #f0f0f0;
--glide-core-surface-base-dark: #212121;
--glide-core-surface-base-gray: #0000001a;
Expand Down
6 changes: 5 additions & 1 deletion src/styles/variables/miscellaneous.css
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,11 @@
--glide-core-heading-xxxs-font-weight: var(--glide-core-font-weight-bold);
--glide-core-heading-xxxs-line-height: 1.7;
--glide-core-shadow-checkbox: 0px 0px 7px 0px #5ba4ee;
--glide-core-shadow-sm: 0px 2.275px 8.342px 0px rgba(181, 181, 181, 0.25);
--glide-core-shadow-sm: var(--glide-core-effects-shadow-small-x)
var(--glide-core-effects-shadow-small-y)
var(--glide-core-effects-shadow-small-blur)
var(--glide-core-effects-shadow-small-spread)
var(--glide-core-effects-shadow-small-fill);
--glide-core-shadow-md: 0px 3px 8px 0px rgba(0, 0, 0, 0.15),
0px 3px 1px 0px rgba(0, 0, 0, 0.06);
--glide-core-shadow-lg: var(--glide-core-effects-shadow-large-x)
Expand Down
Loading
Loading
点击 这是indexloc提供的php浏览器服务,不要输入任何密码和下载