Skip to content

Commit 987f174

Browse files
LFDanLuLFDanLu
authored
Update table resizer svg and bump tokens package (#7154)
* Update resizer svg to newest one from icons team * Bump tokens package * update Badge colors * update to use the same token names instead of their underlying color * replacing accent with informative
1 parent f0245fd commit 987f174

File tree

8 files changed

+73
-58
lines changed

8 files changed

+73
-58
lines changed

‎packages/@react-spectrum/s2/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -119,7 +119,7 @@
119119
"postpack": "git checkout -- package.json"
120120
},
121121
"devDependencies": {
122-
"@adobe/spectrum-tokens": "^13.0.0-beta.46",
122+
"@adobe/spectrum-tokens": "^13.0.0-beta.48",
123123
"@parcel/macros": "2.12.1-canary.3165"
124124
},
125125
"dependencies": {

‎packages/@react-spectrum/s2/src/Badge.tsx‎

Lines changed: 30 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import {centerBaseline} from './CenterBaseline';
1515
import {centerPadding, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
1616
import {ContextValue, Provider, SlotProps} from 'react-aria-components';
1717
import {filterDOMProps} from '@react-aria/utils';
18-
import {fontRelative, style} from '../style' with {type: 'macro'};
18+
import {fontRelative, lightDark, style} from '../style' with {type: 'macro'};
1919
import {IconContext} from './Icon';
2020
import React, {createContext, forwardRef, ReactNode} from 'react';
2121
import {SkeletonWrapper} from './Skeleton';
@@ -26,13 +26,13 @@ import {useSpectrumContextProps} from './useSpectrumContextProps';
2626
export interface BadgeStyleProps {
2727
/**
2828
* The size of the badge.
29-
*
29+
*
3030
* @default 'S'
3131
*/
3232
size?: 'S' | 'M' | 'L' | 'XL',
3333
/**
3434
* The variant changes the background color of the badge. When badge has a semantic meaning, they should use the variant for semantic colors.
35-
*
35+
*
3636
* @default 'neutral'
3737
*/
3838
variant?: 'accent' | 'informative' | 'neutral' | 'positive' | 'notice' | 'negative' | 'gray' | 'red' | 'orange' | 'yellow' | 'charteuse' | 'celery' | 'green' | 'seafoam' | 'cyan' | 'blue' | 'indigo' | 'purple' | 'fuchsia' | 'magenta' | 'pink' | 'turquoise' | 'brown' | 'cinnamon' | 'silver',
@@ -127,34 +127,34 @@ const badge = style<BadgeStyleProps>({
127127
},
128128
subtle: {
129129
variant: {
130-
accent: 'accent-200',
130+
accent: 'accent-subtle',
131131
informative: 'informative-subtle',
132132
neutral: 'neutral-subtle',
133133
positive: 'positive-subtle',
134134
notice: 'notice-subtle',
135135
negative: 'negative-subtle',
136-
gray: 'gray-100',
137-
red: 'red-200',
138-
orange: 'orange-200',
139-
yellow: 'yellow-200',
140-
charteuse: 'chartreuse-200',
141-
celery: 'celery-200',
142-
green: 'green-200',
143-
seafoam: 'seafoam-200',
144-
cyan: 'cyan-200',
145-
blue: 'blue-200',
146-
indigo: 'indigo-200',
147-
purple: 'purple-200',
148-
fuchsia: 'fuchsia-200',
149-
magenta: 'magenta-200',
150-
pink: 'pink-200',
151-
turquoise: 'turquoise-200',
152-
brown: 'brown-200',
153-
cinnamon: 'cinnamon-200',
154-
silver: 'silver-200'
136+
gray: 'gray-subtle',
137+
red: 'red-subtle',
138+
orange: 'orange-subtle',
139+
yellow: 'yellow-subtle',
140+
charteuse: 'chartreuse-subtle',
141+
celery: 'celery-subtle',
142+
green: 'green-subtle',
143+
seafoam: 'seafoam-subtle',
144+
cyan: 'cyan-subtle',
145+
blue: 'blue-subtle',
146+
indigo: 'indigo-subtle',
147+
purple: 'purple-subtle',
148+
fuchsia: 'fuchsia-subtle',
149+
magenta: 'magenta-subtle',
150+
pink: 'pink-subtle',
151+
turquoise: 'turquoise-subtle',
152+
brown: 'brown-subtle',
153+
cinnamon: 'cinnamon-subtle',
154+
silver: 'silver-subtle'
155155
}
156156
},
157-
outline: 'gray-25'
157+
outline: 'layer-2'
158158
}
159159
},
160160
borderStyle: 'solid',
@@ -165,12 +165,12 @@ const badge = style<BadgeStyleProps>({
165165
fillStyle: {
166166
outline: {
167167
variant: {
168-
accent: 'accent-800',
169-
informative: 'informative-800',
170-
neutral: 'gray-700',
171-
positive: 'positive-700',
172-
notice: 'notice-700',
173-
negative: 'negative-800'
168+
accent: lightDark('accent-800', 'accent-900'), // accent-visual-color
169+
informative: lightDark('informative-800', 'informative-900'), // informative-visual-color
170+
neutral: lightDark('gray-500', 'gray-600'), // neutral-visual-color
171+
positive: lightDark('positive-800', 'positive-900'), // positive-visual-color
172+
notice: lightDark('notice-800', 'notice-900'), // notice-visual-color
173+
negative: lightDark('negative-800', 'negative-900') // negative-visual-color
174174
}
175175
}
176176
}

‎packages/@react-spectrum/s2/src/TableView.tsx‎

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ import intlMessages from '../intl/*.json';
5555
import {LayoutNode} from '@react-stately/layout';
5656
import {Menu, MenuItem, MenuTrigger} from './Menu';
5757
import {mergeStyles} from '../style/runtime';
58-
import Nubbin from '../ui-icons/S2_Icon_MoveHorizontalCircleTableWidget_16_N.svg';
58+
import Nubbin from '../ui-icons/S2_MoveHorizontalTableWidget.svg';
5959
import {ProgressCircle} from './ProgressCircle';
6060
import {raw} from '../style/style-macro' with {type: 'macro'};
6161
import React, {createContext, forwardRef, ReactNode, useCallback, useContext, useMemo, useRef, useState} from 'react';
@@ -628,20 +628,15 @@ const resizerHandleContainer = style({
628628
'right': 'w-resize',
629629
'both': 'ew-resize'
630630
}
631-
},
632-
// So that the user can still hover + drag the resizer even though it's hit area is partially in the adjacent column's space
633-
'--focus-ring-color': {
634-
type: 'outlineColor',
635-
value: 'focus-ring'
636631
}
637632
});
638633

639634
const resizerHandle = style({
640635
backgroundColor: {
641636
default: 'transparent',
642637
isHovered: 'gray-300',
643-
isFocusVisible: '--focus-ring-color',
644-
isResizing: '--focus-ring-color',
638+
isFocusVisible: lightDark('informative-900', 'informative-700'), // --spectrum-informative-background-color-default, can't use `informative` because that will use the focusVisible version
639+
isResizing: lightDark('informative-900', 'informative-700'),
645640
forcedColors: {
646641
default: 'Background',
647642
isHovered: 'ButtonBorder',
@@ -687,7 +682,7 @@ const nubbin = style({
687682
insetStart: size(-1),
688683
size: fontRelative(16),
689684
fill: {
690-
default: '--focus-ring-color',
685+
default: lightDark('informative-900', 'informative-700'), // --spectrum-informative-background-color-default, can't use `informative` because that won't be the background color value
691686
forcedColors: 'Highlight'
692687
},
693688
'--iconPrimary': {

‎packages/@react-spectrum/s2/style/spectrum-theme.ts‎

Lines changed: 25 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -475,6 +475,7 @@ export const style = createTheme({
475475
isFocusVisible: weirdColorToken('accent-background-color-key-focus'),
476476
isPressed: weirdColorToken('accent-background-color-down')
477477
},
478+
'accent-subtle': weirdColorToken('accent-subtle-background-color-default'),
478479
neutral: {
479480
default: colorToken('neutral-background-color-default'),
480481
isHovered: colorToken('neutral-background-color-hover'),
@@ -487,49 +488,68 @@ export const style = createTheme({
487488
isFocusVisible: weirdColorToken('neutral-subdued-background-color-key-focus'),
488489
isPressed: weirdColorToken('neutral-subdued-background-color-down')
489490
},
490-
'neutral-subtle': colorToken('neutral-subtle-background-color-default'),
491+
'neutral-subtle': weirdColorToken('neutral-subtle-background-color-default'),
491492
negative: {
492493
default: weirdColorToken('negative-background-color-default'),
493494
isHovered: weirdColorToken('negative-background-color-hover'),
494495
isFocusVisible: weirdColorToken('negative-background-color-key-focus'),
495496
isPressed: weirdColorToken('negative-background-color-down')
496497
},
497-
'negative-subtle': colorToken('negative-subtle-background-color-default'),
498+
'negative-subtle': weirdColorToken('negative-subtle-background-color-default'),
498499
informative: {
499500
default: weirdColorToken('informative-background-color-default'),
500501
isHovered: weirdColorToken('informative-background-color-hover'),
501502
isFocusVisible: weirdColorToken('informative-background-color-key-focus'),
502503
isPressed: weirdColorToken('informative-background-color-down')
503504
},
504-
'informative-subtle': colorToken('informative-subtle-background-color-default'),
505+
'informative-subtle': weirdColorToken('informative-subtle-background-color-default'),
505506
positive: {
506507
default: weirdColorToken('positive-background-color-default'),
507508
isHovered: weirdColorToken('positive-background-color-hover'),
508509
isFocusVisible: weirdColorToken('positive-background-color-key-focus'),
509510
isPressed: weirdColorToken('positive-background-color-down')
510511
},
511-
'positive-subtle': colorToken('positive-subtle-background-color-default'),
512+
'positive-subtle': weirdColorToken('positive-subtle-background-color-default'),
512513
notice: weirdColorToken('notice-background-color-default'),
513-
'notice-subtle': colorToken('notice-subtle-background-color-default'),
514+
'notice-subtle': weirdColorToken('notice-subtle-background-color-default'),
514515
gray: weirdColorToken('gray-background-color-default'),
516+
'gray-subtle': weirdColorToken('gray-subtle-background-color-default'),
515517
red: weirdColorToken('red-background-color-default'),
518+
'red-subtle': weirdColorToken('red-subtle-background-color-default'),
516519
orange: weirdColorToken('orange-background-color-default'),
520+
'orange-subtle': weirdColorToken('orange-subtle-background-color-default'),
517521
yellow: weirdColorToken('yellow-background-color-default'),
522+
'yellow-subtle': weirdColorToken('yellow-subtle-background-color-default'),
518523
chartreuse: weirdColorToken('chartreuse-background-color-default'),
524+
'chartreuse-subtle': weirdColorToken('chartreuse-subtle-background-color-default'),
519525
celery: weirdColorToken('celery-background-color-default'),
526+
'celery-subtle': weirdColorToken('celery-subtle-background-color-default'),
520527
green: weirdColorToken('green-background-color-default'),
528+
'green-subtle': weirdColorToken('green-subtle-background-color-default'),
521529
seafoam: weirdColorToken('seafoam-background-color-default'),
530+
'seafoam-subtle': weirdColorToken('seafoam-subtle-background-color-default'),
522531
cyan: weirdColorToken('cyan-background-color-default'),
532+
'cyan-subtle': weirdColorToken('cyan-subtle-background-color-default'),
523533
blue: weirdColorToken('blue-background-color-default'),
534+
'blue-subtle': weirdColorToken('blue-subtle-background-color-default'),
524535
indigo: weirdColorToken('indigo-background-color-default'),
536+
'indigo-subtle': weirdColorToken('indigo-subtle-background-color-default'),
525537
purple: weirdColorToken('purple-background-color-default'),
538+
'purple-subtle': weirdColorToken('purple-subtle-background-color-default'),
526539
fuchsia: weirdColorToken('fuchsia-background-color-default'),
540+
'fuchsia-subtle': weirdColorToken('fuchsia-subtle-background-color-default'),
527541
magenta: weirdColorToken('magenta-background-color-default'),
542+
'magenta-subtle': weirdColorToken('magenta-subtle-background-color-default'),
528543
pink: weirdColorToken('pink-background-color-default'),
544+
'pink-subtle': weirdColorToken('pink-subtle-background-color-default'),
529545
turquoise: weirdColorToken('turquoise-background-color-default'),
546+
'turquoise-subtle': weirdColorToken('turquoise-subtle-background-color-default'),
530547
cinnamon: weirdColorToken('cinnamon-background-color-default'),
548+
'cinnamon-subtle': weirdColorToken('cinnamon-subtle-background-color-default'),
531549
brown: weirdColorToken('brown-background-color-default'),
550+
'brown-subtle': weirdColorToken('brown-subtle-background-color-default'),
532551
silver: weirdColorToken('silver-background-color-default'),
552+
'silver-subtle': weirdColorToken('silver-subtle-background-color-default'),
533553
disabled: colorToken('disabled-background-color'),
534554
base: colorToken('background-base-color'),
535555
'layer-1': colorToken('background-layer-1-color'),

‎packages/@react-spectrum/s2/ui-icons/S2_Icon_MoveHorizontalCircleTableWidget_16_N.svg‎

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎packages/@react-spectrum/s2/ui-icons/S2_MoveHorizontalTableWidget.svg‎

Lines changed: 6 additions & 0 deletions
Loading

‎packages/dev/parcel-transformer-s2-icon/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
"parcel": "^2.0.0"
77
},
88
"dependencies": {
9-
"@adobe/spectrum-tokens": "^13.0.0-beta.46",
9+
"@adobe/spectrum-tokens": "^13.0.0-beta.48",
1010
"@parcel/plugin": "^2.0.0",
1111
"@svgr/core": "^6.2.0",
1212
"@svgr/plugin-jsx": "^6.2.0",

‎yarn.lock‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -144,10 +144,10 @@ __metadata:
144144
languageName: unknown
145145
linkType: soft
146146

147-
"@adobe/spectrum-tokens@npm:^13.0.0-beta.46":
148-
version: 13.0.0-beta.46
149-
resolution: "@adobe/spectrum-tokens@npm:13.0.0-beta.46"
150-
checksum: 10c0/b76a0eed569e2f58c9e9c3aed9128ed13e6171d2d27bc74e92ee5e40eb2c1f2e15e9ac872be3d1815f57f7dd880a33c805b7e3f3e18ce2a7e19e506a1a56c895
147+
"@adobe/spectrum-tokens@npm:^13.0.0-beta.48":
148+
version: 13.0.0-beta.49
149+
resolution: "@adobe/spectrum-tokens@npm:13.0.0-beta.49"
150+
checksum: 10c0/91dad202f31901a6e014a019964c1d917ef073f98debd2f04573c371109dd491ba0a942c68843358f2b3f10281737173b89daed23328f233e290e12b7faa1d49
151151
languageName: node
152152
linkType: hard
153153

@@ -7449,7 +7449,7 @@ __metadata:
74497449
version: 0.0.0-use.local
74507450
resolution: "@react-spectrum/parcel-transformer-s2-icon@workspace:packages/dev/parcel-transformer-s2-icon"
74517451
dependencies:
7452-
"@adobe/spectrum-tokens": "npm:^13.0.0-beta.46"
7452+
"@adobe/spectrum-tokens": "npm:^13.0.0-beta.48"
74537453
"@parcel/plugin": "npm:^2.0.0"
74547454
"@svgr/core": "npm:^6.2.0"
74557455
"@svgr/plugin-jsx": "npm:^6.2.0"
@@ -7566,7 +7566,7 @@ __metadata:
75667566
version: 0.0.0-use.local
75677567
resolution: "@react-spectrum/s2@workspace:packages/@react-spectrum/s2"
75687568
dependencies:
7569-
"@adobe/spectrum-tokens": "npm:^13.0.0-beta.46"
7569+
"@adobe/spectrum-tokens": "npm:^13.0.0-beta.48"
75707570
"@parcel/macros": "npm:2.12.1-canary.3165"
75717571
"@react-aria/collections": "npm:3.0.0-alpha.5"
75727572
"@react-aria/i18n": "npm:^3.12.3"

0 commit comments

Comments
 (0)