@pantheon-systems/pds-design-tokens 2.0.0-alpha.47 → 2.0.0-alpha.48

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/build/css/variables.dark.css +4 -5
  2. package/build/css/variables.light.css +1 -2
  3. package/build/figma/tokens.json +43 -81
  4. package/package.json +1 -1
package/build/css/variables.dark.css CHANGED
@@ -74,8 +74,8 @@
74
74
  --pds-color-banner-neutral-background: oklch(0.5103 0 0);
75
75
  --pds-color-banner-neutral-foreground: oklch(0.9702 0 0);
76
76
  --pds-color-card-background: oklch(0.2178 0 0);
77
- --pds-color-code-block-dark-background: var(--pds-color-surface-reverse);
78
- --pds-color-code-block-dark-foreground: var(--pds-color-foreground-reverse);
77
+ --pds-color-code-block-dark-background: oklch(1.0000 0 0);
78
+ --pds-color-code-block-dark-foreground: oklch(1.0000 0 0);
79
79
  --pds-color-code-block-dark-line-prefix: #9699A1;
80
80
  --pds-color-code-block-dark-highlight: #474954;
81
81
  --pds-color-code-block-light-background: #EFF0F0;
@@ -97,9 +97,7 @@
97
97
  --pds-color-pagination-background-hover: oklch(0.2603 0 0);
98
98
  --pds-color-pagination-background-active: oklch(0.2000 0.0400 268.00);
99
99
  --pds-color-pagination-background-current: oklch(0.6496 0.1590 270.95);
100
- --pds-color-panel-sunken-background: oklch(0.2178 0 0);
101
- --pds-color-panel-raised-background: oklch(0.2178 0 0);
102
- --pds-color-panel-overlay-background: oklch(0.2178 0 0);
100
+ --pds-color-panel-sunken-background: oklch(0.2603 0 0);
103
101
  --pds-color-expansion-panel-hover: oklch(0.2931 0 0);
104
102
  --pds-color-expansion-panel-open: oklch(0.2931 0 0);
105
103
  --pds-color-popover-border: oklch(0.31 0.005 258);
@@ -335,6 +333,7 @@
335
333
  --pds-color-interactive-ui-hover: oklch(0.6496 0.1590 270.95);
336
334
  --pds-color-interactive-ui-active: oklch(0.6496 0.1590 270.95);
337
335
  --pds-color-interactive-ui-current: oklch(0.6496 0.1590 270.95);
336
+ --pds-color-interactive-ui-inactive: oklch(0.5991 0 0);
338
337
  --pds-color-interactive-ui-background-hover: oklch(0.2603 0 0);
339
338
  --pds-color-interactive-ui-background-active: oklch(0.2931 0 0);
340
339
  --pds-color-interactive-ui-background-selected: oklch(0.2000 0.0400 268.00);
package/build/css/variables.light.css CHANGED
@@ -98,8 +98,6 @@
98
98
  --pds-color-pagination-background-active: oklch(0.9500 0.0300 268.00);
99
99
  --pds-color-pagination-background-current: oklch(0.5256 0.1988 268.04);
100
100
  --pds-color-panel-sunken-background: oklch(0.9702 0 0);
101
- --pds-color-panel-raised-background: oklch(0.9702 0 0);
102
- --pds-color-panel-overlay-background: oklch(0.9702 0 0);
103
101
  --pds-color-expansion-panel-hover: oklch(0.9702 0 0);
104
102
  --pds-color-expansion-panel-open: oklch(0.9702 0 0);
105
103
  --pds-color-popover-border: oklch(0.9430 0 0);
@@ -335,6 +333,7 @@
335
333
  --pds-color-interactive-ui-hover: oklch(0.5256 0.1988 268.04);
336
334
  --pds-color-interactive-ui-active: oklch(0.5256 0.1988 268.04);
337
335
  --pds-color-interactive-ui-current: oklch(0.5256 0.1988 268.04);
336
+ --pds-color-interactive-ui-inactive: oklch(0.8047 0 0);
338
337
  --pds-color-interactive-ui-background-hover: oklch(0.9702 0 0);
339
338
  --pds-color-interactive-ui-background-active: oklch(0.9430 0 0);
340
339
  --pds-color-interactive-ui-background-selected: oklch(0.9500 0.0300 268.00);
package/build/figma/tokens.json CHANGED
@@ -3036,7 +3036,7 @@
3036
3036
  "reverse": {
3037
3037
  "background": {
3038
3038
  "default": {
3039
- "value": "{color.dark-mode.neutral.900}",
3039
+ "value": "#f5f5f5",
3040
3040
  "type": "color",
3041
3041
  "$extensions": {
3042
3042
  "public": true,
@@ -3109,7 +3109,7 @@
3109
3109
  }
3110
3110
  },
3111
3111
  "hover": {
3112
- "value": "{color.dark-mode.neutral.300}",
3112
+ "value": "#2c2c2c",
3113
3113
  "type": "color",
3114
3114
  "$extensions": {
3115
3115
  "public": true,
@@ -3138,7 +3138,7 @@
3138
3138
  }
3139
3139
  },
3140
3140
  "border": {
3141
- "value": "{color.dark-mode.neutral.600}",
3141
+ "value": "#666666",
3142
3142
  "type": "color",
3143
3143
  "$extensions": {
3144
3144
  "public": true,
@@ -3399,7 +3399,7 @@
3399
3399
  },
3400
3400
  "border": {
3401
3401
  "default": {
3402
- "value": "{color.dark-mode.neutral.600}",
3402
+ "value": "#666666",
3403
3403
  "type": "color",
3404
3404
  "$extensions": {
3405
3405
  "public": true,
@@ -3413,7 +3413,7 @@
3413
3413
  }
3414
3414
  },
3415
3415
  "hover": {
3416
- "value": "{color.dark-mode.neutral.600}",
3416
+ "value": "#666666",
3417
3417
  "type": "color",
3418
3418
  "$extensions": {
3419
3419
  "public": true,
@@ -4455,7 +4455,7 @@
4455
4455
  }
4456
4456
  },
4457
4457
  "reverse-secondary": {
4458
- "value": "{color.dark-mode.neutral.800}",
4458
+ "value": "#cccccc",
4459
4459
  "type": "color",
4460
4460
  "$extensions": {
4461
4461
  "public": true,
@@ -4807,6 +4807,19 @@
4807
4807
  }
4808
4808
  }
4809
4809
  },
4810
+ "inactive": {
4811
+ "value": "#bfbfbf",
4812
+ "type": "color",
4813
+ "$extensions": {
4814
+ "public": true,
4815
+ "com.figma": {
4816
+ "exportAs": "variable",
4817
+ "codeSyntax": {
4818
+ "WEB": "--pds-color-interactive-ui-inactive"
4819
+ }
4820
+ }
4821
+ }
4822
+ },
4810
4823
  "background": {
4811
4824
  "hover": {
4812
4825
  "value": "{color.light-mode.neutral.200}",
@@ -6986,38 +6999,6 @@
6986
6999
  }
6987
7000
  }
6988
7001
  }
6989
- },
6990
- "raised": {
6991
- "background": {
6992
- "value": "{color.light-mode.neutral.200}",
6993
- "type": "color",
6994
- "$extensions": {
6995
- "public": true,
6996
- "resolveValue": true,
6997
- "com.figma": {
6998
- "exportAs": "variable",
6999
- "codeSyntax": {
7000
- "WEB": "--pds-color-panel-raised-background"
7001
- }
7002
- }
7003
- }
7004
- }
7005
- },
7006
- "overlay": {
7007
- "background": {
7008
- "value": "{color.light-mode.neutral.200}",
7009
- "type": "color",
7010
- "$extensions": {
7011
- "public": true,
7012
- "resolveValue": true,
7013
- "com.figma": {
7014
- "exportAs": "variable",
7015
- "codeSyntax": {
7016
- "WEB": "--pds-color-panel-overlay-background"
7017
- }
7018
- }
7019
- }
7020
- }
7021
7002
  }
7022
7003
  },
7023
7004
  "expansion-panel": {
@@ -10757,7 +10738,7 @@
10757
10738
  }
10758
10739
  },
10759
10740
  "hover": {
10760
- "value": "{color.light-mode.neutral.300}",
10741
+ "value": "#ececec",
10761
10742
  "type": "color",
10762
10743
  "$extensions": {
10763
10744
  "public": true,
@@ -10786,7 +10767,7 @@
10786
10767
  }
10787
10768
  },
10788
10769
  "border": {
10789
- "value": "{color.light-mode.neutral.500}",
10770
+ "value": "#bfbfbf",
10790
10771
  "type": "color",
10791
10772
  "$extensions": {
10792
10773
  "public": true,
@@ -11031,7 +11012,7 @@
11031
11012
  }
11032
11013
  },
11033
11014
  "hover": {
11034
- "value": "{color.light-mode.neutral.300}",
11015
+ "value": "#ececec",
11035
11016
  "type": "color",
11036
11017
  "$extensions": {
11037
11018
  "public": true,
@@ -11047,7 +11028,7 @@
11047
11028
  },
11048
11029
  "border": {
11049
11030
  "default": {
11050
- "value": "{color.light-mode.neutral.500}",
11031
+ "value": "#bfbfbf",
11051
11032
  "type": "color",
11052
11033
  "$extensions": {
11053
11034
  "public": true,
@@ -11061,7 +11042,7 @@
11061
11042
  }
11062
11043
  },
11063
11044
  "hover": {
11064
- "value": "{color.light-mode.neutral.500}",
11045
+ "value": "#bfbfbf",
11065
11046
  "type": "color",
11066
11047
  "$extensions": {
11067
11048
  "public": true,
@@ -11076,7 +11057,7 @@
11076
11057
  }
11077
11058
  },
11078
11059
  "foreground": {
11079
- "value": "{color.light-mode.neutral.800}",
11060
+ "value": "#424242",
11080
11061
  "type": "color",
11081
11062
  "$extensions": {
11082
11063
  "public": true,
@@ -12101,7 +12082,7 @@
12101
12082
  }
12102
12083
  },
12103
12084
  "reverse-secondary": {
12104
- "value": "{color.light-mode.neutral.700}",
12085
+ "value": "#686868",
12105
12086
  "type": "color",
12106
12087
  "$extensions": {
12107
12088
  "public": true,
@@ -12180,7 +12161,7 @@
12180
12161
  }
12181
12162
  },
12182
12163
  "foreground": {
12183
- "value": "{color.light-mode.neutral.100}",
12164
+ "value": "#ffffff",
12184
12165
  "type": "color",
12185
12166
  "$extensions": {
12186
12167
  "public": true,
@@ -12453,6 +12434,19 @@
12453
12434
  }
12454
12435
  }
12455
12436
  },
12437
+ "inactive": {
12438
+ "value": "#808080",
12439
+ "type": "color",
12440
+ "$extensions": {
12441
+ "public": true,
12442
+ "com.figma": {
12443
+ "exportAs": "variable",
12444
+ "codeSyntax": {
12445
+ "WEB": "--pds-color-interactive-ui-inactive"
12446
+ }
12447
+ }
12448
+ }
12449
+ },
12456
12450
  "background": {
12457
12451
  "hover": {
12458
12452
  "value": "{color.dark-mode.neutral.200}",
@@ -14256,7 +14250,7 @@
14256
14250
  "code-block": {
14257
14251
  "dark": {
14258
14252
  "background": {
14259
- "value": "{color.light-mode.surface.reverse}",
14253
+ "value": "#ffffff",
14260
14254
  "type": "color",
14261
14255
  "$extensions": {
14262
14256
  "public": true,
@@ -14269,7 +14263,7 @@
14269
14263
  }
14270
14264
  },
14271
14265
  "foreground": {
14272
- "value": "{color.light-mode.foreground.reverse}",
14266
+ "value": "#ffffff",
14273
14267
  "type": "color",
14274
14268
  "$extensions": {
14275
14269
  "public": true,
@@ -14619,7 +14613,7 @@
14619
14613
  "panel": {
14620
14614
  "sunken": {
14621
14615
  "background": {
14622
- "value": "{color.dark-mode.neutral.100}",
14616
+ "value": "{color.dark-mode.neutral.200}",
14623
14617
  "type": "color",
14624
14618
  "$extensions": {
14625
14619
  "public": true,
@@ -14632,38 +14626,6 @@
14632
14626
  }
14633
14627
  }
14634
14628
  }
14635
- },
14636
- "raised": {
14637
- "background": {
14638
- "value": "{color.dark-mode.neutral.100}",
14639
- "type": "color",
14640
- "$extensions": {
14641
- "public": true,
14642
- "resolveValue": true,
14643
- "com.figma": {
14644
- "exportAs": "variable",
14645
- "codeSyntax": {
14646
- "WEB": "--pds-color-panel-raised-background"
14647
- }
14648
- }
14649
- }
14650
- }
14651
- },
14652
- "overlay": {
14653
- "background": {
14654
- "value": "{color.dark-mode.neutral.100}",
14655
- "type": "color",
14656
- "$extensions": {
14657
- "public": true,
14658
- "resolveValue": true,
14659
- "com.figma": {
14660
- "exportAs": "variable",
14661
- "codeSyntax": {
14662
- "WEB": "--pds-color-panel-overlay-background"
14663
- }
14664
- }
14665
- }
14666
- }
14667
14629
  }
14668
14630
  },
14669
14631
  "expansion-panel": {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@pantheon-systems/pds-design-tokens",
3
3
  "description": "Design Tokens for the Pantheon Design System",
4
- "version": "2.0.0-alpha.47",
4
+ "version": "2.0.0-alpha.48",
5
5
  "publishConfig": {
6
6
  "access": "public",
7
7
  "registry": "https://registry.npmjs.org/",