@hashicorp/design-system-tokens 0.0.19 → 0.1.0
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.
|
@@ -5530,6 +5530,125 @@
|
|
|
5530
5530
|
"07"
|
|
5531
5531
|
]
|
|
5532
5532
|
},
|
|
5533
|
+
{
|
|
5534
|
+
"value": "-apple-system, BlinkMacSystemFont, SF Pro Display, Segoe UI Display, Ubuntu, sans-serif",
|
|
5535
|
+
"original": {
|
|
5536
|
+
"value": "{typography.font-stack.sans.display.macOS.value}, {typography.font-stack.sans.display.windows.value}, {typography.font-stack.sans.display.linux.value}, sans-serif"
|
|
5537
|
+
},
|
|
5538
|
+
"name": "token-typography-font-stack-display",
|
|
5539
|
+
"attributes": {
|
|
5540
|
+
"category": "typography",
|
|
5541
|
+
"type": "font-stack",
|
|
5542
|
+
"item": "display"
|
|
5543
|
+
},
|
|
5544
|
+
"path": [
|
|
5545
|
+
"typography",
|
|
5546
|
+
"font-stack",
|
|
5547
|
+
"display"
|
|
5548
|
+
]
|
|
5549
|
+
},
|
|
5550
|
+
{
|
|
5551
|
+
"value": "-apple-system, BlinkMacSystemFont, SF Pro Text, Segoe UI Text, Ubuntu, sans-serif",
|
|
5552
|
+
"original": {
|
|
5553
|
+
"value": "{typography.font-stack.sans.text.macOS.value}, {typography.font-stack.sans.text.windows.value}, {typography.font-stack.sans.text.linux.value}, sans-serif"
|
|
5554
|
+
},
|
|
5555
|
+
"name": "token-typography-font-stack-text",
|
|
5556
|
+
"attributes": {
|
|
5557
|
+
"category": "typography",
|
|
5558
|
+
"type": "font-stack",
|
|
5559
|
+
"item": "text"
|
|
5560
|
+
},
|
|
5561
|
+
"path": [
|
|
5562
|
+
"typography",
|
|
5563
|
+
"font-stack",
|
|
5564
|
+
"text"
|
|
5565
|
+
]
|
|
5566
|
+
},
|
|
5567
|
+
{
|
|
5568
|
+
"value": "SF Mono, Consolas, Ubuntu Mono, monospace",
|
|
5569
|
+
"original": {
|
|
5570
|
+
"value": "{typography.font-stack.monospace.code.macOS.value}, {typography.font-stack.monospace.code.windows.value}, {typography.font-stack.monospace.code.linux.value}, monospace"
|
|
5571
|
+
},
|
|
5572
|
+
"name": "token-typography-font-stack-code",
|
|
5573
|
+
"attributes": {
|
|
5574
|
+
"category": "typography",
|
|
5575
|
+
"type": "font-stack",
|
|
5576
|
+
"item": "code"
|
|
5577
|
+
},
|
|
5578
|
+
"path": [
|
|
5579
|
+
"typography",
|
|
5580
|
+
"font-stack",
|
|
5581
|
+
"code"
|
|
5582
|
+
]
|
|
5583
|
+
},
|
|
5584
|
+
{
|
|
5585
|
+
"value": "400",
|
|
5586
|
+
"original": {
|
|
5587
|
+
"value": "400"
|
|
5588
|
+
},
|
|
5589
|
+
"name": "token-typography-font-weight-regular",
|
|
5590
|
+
"attributes": {
|
|
5591
|
+
"category": "typography",
|
|
5592
|
+
"type": "font-weight",
|
|
5593
|
+
"item": "regular"
|
|
5594
|
+
},
|
|
5595
|
+
"path": [
|
|
5596
|
+
"typography",
|
|
5597
|
+
"font-weight",
|
|
5598
|
+
"regular"
|
|
5599
|
+
]
|
|
5600
|
+
},
|
|
5601
|
+
{
|
|
5602
|
+
"value": "500",
|
|
5603
|
+
"original": {
|
|
5604
|
+
"value": "500"
|
|
5605
|
+
},
|
|
5606
|
+
"name": "token-typography-font-weight-medium",
|
|
5607
|
+
"attributes": {
|
|
5608
|
+
"category": "typography",
|
|
5609
|
+
"type": "font-weight",
|
|
5610
|
+
"item": "medium"
|
|
5611
|
+
},
|
|
5612
|
+
"path": [
|
|
5613
|
+
"typography",
|
|
5614
|
+
"font-weight",
|
|
5615
|
+
"medium"
|
|
5616
|
+
]
|
|
5617
|
+
},
|
|
5618
|
+
{
|
|
5619
|
+
"value": "600",
|
|
5620
|
+
"original": {
|
|
5621
|
+
"value": "600"
|
|
5622
|
+
},
|
|
5623
|
+
"name": "token-typography-font-weight-semibold",
|
|
5624
|
+
"attributes": {
|
|
5625
|
+
"category": "typography",
|
|
5626
|
+
"type": "font-weight",
|
|
5627
|
+
"item": "semibold"
|
|
5628
|
+
},
|
|
5629
|
+
"path": [
|
|
5630
|
+
"typography",
|
|
5631
|
+
"font-weight",
|
|
5632
|
+
"semibold"
|
|
5633
|
+
]
|
|
5634
|
+
},
|
|
5635
|
+
{
|
|
5636
|
+
"value": "700",
|
|
5637
|
+
"original": {
|
|
5638
|
+
"value": "700"
|
|
5639
|
+
},
|
|
5640
|
+
"name": "token-typography-font-weight-bold",
|
|
5641
|
+
"attributes": {
|
|
5642
|
+
"category": "typography",
|
|
5643
|
+
"type": "font-weight",
|
|
5644
|
+
"item": "bold"
|
|
5645
|
+
},
|
|
5646
|
+
"path": [
|
|
5647
|
+
"typography",
|
|
5648
|
+
"font-weight",
|
|
5649
|
+
"bold"
|
|
5650
|
+
]
|
|
5651
|
+
},
|
|
5533
5652
|
{
|
|
5534
5653
|
"value": "-apple-system, BlinkMacSystemFont, SF Pro Display, Segoe UI Display, Ubuntu, sans-serif",
|
|
5535
5654
|
"original": {
|
|
@@ -5589,11 +5708,9 @@
|
|
|
5589
5708
|
},
|
|
5590
5709
|
{
|
|
5591
5710
|
"value": "700",
|
|
5592
|
-
"type": "weight",
|
|
5593
5711
|
"comment": "bold",
|
|
5594
5712
|
"original": {
|
|
5595
|
-
"value": "bold",
|
|
5596
|
-
"type": "weight",
|
|
5713
|
+
"value": "{typography.font-weight.bold.value}",
|
|
5597
5714
|
"comment": "bold"
|
|
5598
5715
|
},
|
|
5599
5716
|
"name": "token-typography-heading-0-font-weight",
|
|
@@ -5667,11 +5784,9 @@
|
|
|
5667
5784
|
},
|
|
5668
5785
|
{
|
|
5669
5786
|
"value": "700",
|
|
5670
|
-
"type": "weight",
|
|
5671
5787
|
"comment": "bold",
|
|
5672
5788
|
"original": {
|
|
5673
|
-
"value": "bold",
|
|
5674
|
-
"type": "weight",
|
|
5789
|
+
"value": "{typography.font-weight.bold.value}",
|
|
5675
5790
|
"comment": "bold"
|
|
5676
5791
|
},
|
|
5677
5792
|
"name": "token-typography-heading-1-font-weight",
|
|
@@ -5745,11 +5860,9 @@
|
|
|
5745
5860
|
},
|
|
5746
5861
|
{
|
|
5747
5862
|
"value": "700",
|
|
5748
|
-
"type": "weight",
|
|
5749
5863
|
"comment": "bold",
|
|
5750
5864
|
"original": {
|
|
5751
|
-
"value": "bold",
|
|
5752
|
-
"type": "weight",
|
|
5865
|
+
"value": "{typography.font-weight.bold.value}",
|
|
5753
5866
|
"comment": "bold"
|
|
5754
5867
|
},
|
|
5755
5868
|
"name": "token-typography-heading-2-font-weight",
|
|
@@ -5842,11 +5955,9 @@
|
|
|
5842
5955
|
},
|
|
5843
5956
|
{
|
|
5844
5957
|
"value": "600",
|
|
5845
|
-
"type": "weight",
|
|
5846
5958
|
"comment": "semibold",
|
|
5847
5959
|
"original": {
|
|
5848
|
-
"value": "semibold",
|
|
5849
|
-
"type": "weight",
|
|
5960
|
+
"value": "{typography.font-weight.semibold.value}",
|
|
5850
5961
|
"comment": "semibold"
|
|
5851
5962
|
},
|
|
5852
5963
|
"name": "token-typography-heading-3-font-weight",
|
|
@@ -5939,11 +6050,9 @@
|
|
|
5939
6050
|
},
|
|
5940
6051
|
{
|
|
5941
6052
|
"value": "500",
|
|
5942
|
-
"type": "weight",
|
|
5943
6053
|
"comment": "medium",
|
|
5944
6054
|
"original": {
|
|
5945
|
-
"value": "medium",
|
|
5946
|
-
"type": "weight",
|
|
6055
|
+
"value": "{typography.font-weight.medium.value}",
|
|
5947
6056
|
"comment": "medium"
|
|
5948
6057
|
},
|
|
5949
6058
|
"name": "token-typography-heading-4-font-weight",
|
|
@@ -6017,11 +6126,9 @@
|
|
|
6017
6126
|
},
|
|
6018
6127
|
{
|
|
6019
6128
|
"value": "500",
|
|
6020
|
-
"type": "weight",
|
|
6021
6129
|
"comment": "medium",
|
|
6022
6130
|
"original": {
|
|
6023
|
-
"value": "medium",
|
|
6024
|
-
"type": "weight",
|
|
6131
|
+
"value": "{typography.font-weight.medium.value}",
|
|
6025
6132
|
"comment": "medium"
|
|
6026
6133
|
},
|
|
6027
6134
|
"name": "token-typography-display-large-font-weight",
|
|
@@ -6095,11 +6202,9 @@
|
|
|
6095
6202
|
},
|
|
6096
6203
|
{
|
|
6097
6204
|
"value": "500",
|
|
6098
|
-
"type": "weight",
|
|
6099
6205
|
"comment": "medium",
|
|
6100
6206
|
"original": {
|
|
6101
|
-
"value": "medium",
|
|
6102
|
-
"type": "weight",
|
|
6207
|
+
"value": "{typography.font-weight.medium.value}",
|
|
6103
6208
|
"comment": "medium"
|
|
6104
6209
|
},
|
|
6105
6210
|
"name": "token-typography-display-small-font-weight",
|
|
@@ -6173,11 +6278,9 @@
|
|
|
6173
6278
|
},
|
|
6174
6279
|
{
|
|
6175
6280
|
"value": "400",
|
|
6176
|
-
"type": "weight",
|
|
6177
6281
|
"comment": "regular",
|
|
6178
6282
|
"original": {
|
|
6179
|
-
"value": "regular",
|
|
6180
|
-
"type": "weight",
|
|
6283
|
+
"value": "{typography.font-weight.regular.value}",
|
|
6181
6284
|
"comment": "regular"
|
|
6182
6285
|
},
|
|
6183
6286
|
"name": "token-typography-body-large-font-weight",
|
|
@@ -6251,11 +6354,9 @@
|
|
|
6251
6354
|
},
|
|
6252
6355
|
{
|
|
6253
6356
|
"value": "400",
|
|
6254
|
-
"type": "weight",
|
|
6255
6357
|
"comment": "regular",
|
|
6256
6358
|
"original": {
|
|
6257
|
-
"value": "regular",
|
|
6258
|
-
"type": "weight",
|
|
6359
|
+
"value": "{typography.font-weight.regular.value}",
|
|
6259
6360
|
"comment": "regular"
|
|
6260
6361
|
},
|
|
6261
6362
|
"name": "token-typography-body-base-font-weight",
|
|
@@ -6329,11 +6430,9 @@
|
|
|
6329
6430
|
},
|
|
6330
6431
|
{
|
|
6331
6432
|
"value": "400",
|
|
6332
|
-
"type": "weight",
|
|
6333
6433
|
"comment": "regular",
|
|
6334
6434
|
"original": {
|
|
6335
|
-
"value": "regular",
|
|
6336
|
-
"type": "weight",
|
|
6435
|
+
"value": "{typography.font-weight.regular.value}",
|
|
6337
6436
|
"comment": "regular"
|
|
6338
6437
|
},
|
|
6339
6438
|
"name": "token-typography-body-small-font-weight",
|
|
@@ -6407,11 +6506,9 @@
|
|
|
6407
6506
|
},
|
|
6408
6507
|
{
|
|
6409
6508
|
"value": "400",
|
|
6410
|
-
"type": "weight",
|
|
6411
6509
|
"comment": "regular",
|
|
6412
6510
|
"original": {
|
|
6413
|
-
"value": "regular",
|
|
6414
|
-
"type": "weight",
|
|
6511
|
+
"value": "{typography.font-weight.regular.value}",
|
|
6415
6512
|
"comment": "regular"
|
|
6416
6513
|
},
|
|
6417
6514
|
"name": "token-typography-code-font-weight",
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Do not edit directly
|
|
3
|
+
* Generated on Fri, 07 Jan 2022 12:58:14 GMT
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
.hds-elevation-inset { box-shadow: var(--token-elevation-inset-shadow-01-x) var(--token-elevation-inset-shadow-01-y) var(--token-elevation-inset-shadow-01-blur) var(--token-elevation-inset-shadow-01-spread) var(--token-elevation-inset-shadow-01-color); }
|
|
7
|
+
.hds-elevation-low { box-shadow: var(--token-elevation-low-shadow-01-x) var(--token-elevation-low-shadow-01-y) var(--token-elevation-low-shadow-01-blur) var(--token-elevation-low-shadow-01-spread) var(--token-elevation-low-shadow-01-color), var(--token-elevation-low-shadow-02-x) var(--token-elevation-low-shadow-02-y) var(--token-elevation-low-shadow-02-blur) var(--token-elevation-low-shadow-02-spread) var(--token-elevation-low-shadow-02-color); }
|
|
8
|
+
.hds-elevation-mid { box-shadow: var(--token-elevation-mid-shadow-01-x) var(--token-elevation-mid-shadow-01-y) var(--token-elevation-mid-shadow-01-blur) var(--token-elevation-mid-shadow-01-spread) var(--token-elevation-mid-shadow-01-color), var(--token-elevation-mid-shadow-02-x) var(--token-elevation-mid-shadow-02-y) var(--token-elevation-mid-shadow-02-blur) var(--token-elevation-mid-shadow-02-spread) var(--token-elevation-mid-shadow-02-color); }
|
|
9
|
+
.hds-elevation-high { box-shadow: var(--token-elevation-high-shadow-01-x) var(--token-elevation-high-shadow-01-y) var(--token-elevation-high-shadow-01-blur) var(--token-elevation-high-shadow-01-spread) var(--token-elevation-high-shadow-01-color), var(--token-elevation-high-shadow-02-x) var(--token-elevation-high-shadow-02-y) var(--token-elevation-high-shadow-02-blur) var(--token-elevation-high-shadow-02-spread) var(--token-elevation-high-shadow-02-color); }
|
|
10
|
+
.hds-elevation-higher { box-shadow: var(--token-elevation-higher-shadow-01-x) var(--token-elevation-higher-shadow-01-y) var(--token-elevation-higher-shadow-01-blur) var(--token-elevation-higher-shadow-01-spread) var(--token-elevation-higher-shadow-01-color), var(--token-elevation-higher-shadow-02-x) var(--token-elevation-higher-shadow-02-y) var(--token-elevation-higher-shadow-02-blur) var(--token-elevation-higher-shadow-02-spread) var(--token-elevation-higher-shadow-02-color); }
|
|
11
|
+
.hds-elevation-overlay { box-shadow: var(--token-elevation-overlay-shadow-01-x) var(--token-elevation-overlay-shadow-01-y) var(--token-elevation-overlay-shadow-01-blur) var(--token-elevation-overlay-shadow-01-spread) var(--token-elevation-overlay-shadow-01-color), var(--token-elevation-overlay-shadow-02-x) var(--token-elevation-overlay-shadow-02-y) var(--token-elevation-overlay-shadow-02-blur) var(--token-elevation-overlay-shadow-02-spread) var(--token-elevation-overlay-shadow-02-color); }
|
|
12
|
+
.hds-surface-inset { box-shadow: 0 0 0 var(--token-elevation-inset-border-width) var(--token-elevation-inset-border-color), var(--token-elevation-inset-shadow-01-x) var(--token-elevation-inset-shadow-01-y) var(--token-elevation-inset-shadow-01-blur) var(--token-elevation-inset-shadow-01-spread) var(--token-elevation-inset-shadow-01-color); }
|
|
13
|
+
.hds-surface-base { box-shadow: 0 0 0 var(--token-elevation-base-border-width) var(--token-elevation-base-border-color); }
|
|
14
|
+
.hds-surface-low { box-shadow: 0 0 0 var(--token-elevation-low-border-width) var(--token-elevation-low-border-color), var(--token-elevation-low-shadow-01-x) var(--token-elevation-low-shadow-01-y) var(--token-elevation-low-shadow-01-blur) var(--token-elevation-low-shadow-01-spread) var(--token-elevation-low-shadow-01-color), var(--token-elevation-low-shadow-02-x) var(--token-elevation-low-shadow-02-y) var(--token-elevation-low-shadow-02-blur) var(--token-elevation-low-shadow-02-spread) var(--token-elevation-low-shadow-02-color); }
|
|
15
|
+
.hds-surface-mid { box-shadow: 0 0 0 var(--token-elevation-mid-border-width) var(--token-elevation-mid-border-color), var(--token-elevation-mid-shadow-01-x) var(--token-elevation-mid-shadow-01-y) var(--token-elevation-mid-shadow-01-blur) var(--token-elevation-mid-shadow-01-spread) var(--token-elevation-mid-shadow-01-color), var(--token-elevation-mid-shadow-02-x) var(--token-elevation-mid-shadow-02-y) var(--token-elevation-mid-shadow-02-blur) var(--token-elevation-mid-shadow-02-spread) var(--token-elevation-mid-shadow-02-color); }
|
|
16
|
+
.hds-surface-high { box-shadow: 0 0 0 var(--token-elevation-high-border-width) var(--token-elevation-high-border-color), var(--token-elevation-high-shadow-01-x) var(--token-elevation-high-shadow-01-y) var(--token-elevation-high-shadow-01-blur) var(--token-elevation-high-shadow-01-spread) var(--token-elevation-high-shadow-01-color), var(--token-elevation-high-shadow-02-x) var(--token-elevation-high-shadow-02-y) var(--token-elevation-high-shadow-02-blur) var(--token-elevation-high-shadow-02-spread) var(--token-elevation-high-shadow-02-color); }
|
|
17
|
+
.hds-surface-higher { box-shadow: 0 0 0 var(--token-elevation-higher-border-width) var(--token-elevation-higher-border-color), var(--token-elevation-higher-shadow-01-x) var(--token-elevation-higher-shadow-01-y) var(--token-elevation-higher-shadow-01-blur) var(--token-elevation-higher-shadow-01-spread) var(--token-elevation-higher-shadow-01-color), var(--token-elevation-higher-shadow-02-x) var(--token-elevation-higher-shadow-02-y) var(--token-elevation-higher-shadow-02-blur) var(--token-elevation-higher-shadow-02-spread) var(--token-elevation-higher-shadow-02-color); }
|
|
18
|
+
.hds-surface-overlay { box-shadow: 0 0 0 var(--token-elevation-overlay-border-width) var(--token-elevation-overlay-border-color), var(--token-elevation-overlay-shadow-01-x) var(--token-elevation-overlay-shadow-01-y) var(--token-elevation-overlay-shadow-01-blur) var(--token-elevation-overlay-shadow-01-spread) var(--token-elevation-overlay-shadow-01-color), var(--token-elevation-overlay-shadow-02-x) var(--token-elevation-overlay-shadow-02-y) var(--token-elevation-overlay-shadow-02-blur) var(--token-elevation-overlay-shadow-02-spread) var(--token-elevation-overlay-shadow-02-color); }
|
package/package.json
CHANGED
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Do not edit directly
|
|
3
|
+
* Generated on Fri, 07 Jan 2022 12:58:14 GMT
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
.hds-elevation-inset { box-shadow: var(--token-elevation-inset-shadow-01-x) var(--token-elevation-inset-shadow-01-y) var(--token-elevation-inset-shadow-01-blur) var(--token-elevation-inset-shadow-01-spread) var(--token-elevation-inset-shadow-01-color); }
|
|
7
|
+
.hds-elevation-low { box-shadow: var(--token-elevation-low-shadow-01-x) var(--token-elevation-low-shadow-01-y) var(--token-elevation-low-shadow-01-blur) var(--token-elevation-low-shadow-01-spread) var(--token-elevation-low-shadow-01-color), var(--token-elevation-low-shadow-02-x) var(--token-elevation-low-shadow-02-y) var(--token-elevation-low-shadow-02-blur) var(--token-elevation-low-shadow-02-spread) var(--token-elevation-low-shadow-02-color); }
|
|
8
|
+
.hds-elevation-mid { box-shadow: var(--token-elevation-mid-shadow-01-x) var(--token-elevation-mid-shadow-01-y) var(--token-elevation-mid-shadow-01-blur) var(--token-elevation-mid-shadow-01-spread) var(--token-elevation-mid-shadow-01-color), var(--token-elevation-mid-shadow-02-x) var(--token-elevation-mid-shadow-02-y) var(--token-elevation-mid-shadow-02-blur) var(--token-elevation-mid-shadow-02-spread) var(--token-elevation-mid-shadow-02-color); }
|
|
9
|
+
.hds-elevation-high { box-shadow: var(--token-elevation-high-shadow-01-x) var(--token-elevation-high-shadow-01-y) var(--token-elevation-high-shadow-01-blur) var(--token-elevation-high-shadow-01-spread) var(--token-elevation-high-shadow-01-color), var(--token-elevation-high-shadow-02-x) var(--token-elevation-high-shadow-02-y) var(--token-elevation-high-shadow-02-blur) var(--token-elevation-high-shadow-02-spread) var(--token-elevation-high-shadow-02-color); }
|
|
10
|
+
.hds-elevation-higher { box-shadow: var(--token-elevation-higher-shadow-01-x) var(--token-elevation-higher-shadow-01-y) var(--token-elevation-higher-shadow-01-blur) var(--token-elevation-higher-shadow-01-spread) var(--token-elevation-higher-shadow-01-color), var(--token-elevation-higher-shadow-02-x) var(--token-elevation-higher-shadow-02-y) var(--token-elevation-higher-shadow-02-blur) var(--token-elevation-higher-shadow-02-spread) var(--token-elevation-higher-shadow-02-color); }
|
|
11
|
+
.hds-elevation-overlay { box-shadow: var(--token-elevation-overlay-shadow-01-x) var(--token-elevation-overlay-shadow-01-y) var(--token-elevation-overlay-shadow-01-blur) var(--token-elevation-overlay-shadow-01-spread) var(--token-elevation-overlay-shadow-01-color), var(--token-elevation-overlay-shadow-02-x) var(--token-elevation-overlay-shadow-02-y) var(--token-elevation-overlay-shadow-02-blur) var(--token-elevation-overlay-shadow-02-spread) var(--token-elevation-overlay-shadow-02-color); }
|
|
12
|
+
.hds-surface-inset { box-shadow: 0 0 0 var(--token-elevation-inset-border-width) var(--token-elevation-inset-border-color), var(--token-elevation-inset-shadow-01-x) var(--token-elevation-inset-shadow-01-y) var(--token-elevation-inset-shadow-01-blur) var(--token-elevation-inset-shadow-01-spread) var(--token-elevation-inset-shadow-01-color); }
|
|
13
|
+
.hds-surface-base { box-shadow: 0 0 0 var(--token-elevation-base-border-width) var(--token-elevation-base-border-color); }
|
|
14
|
+
.hds-surface-low { box-shadow: 0 0 0 var(--token-elevation-low-border-width) var(--token-elevation-low-border-color), var(--token-elevation-low-shadow-01-x) var(--token-elevation-low-shadow-01-y) var(--token-elevation-low-shadow-01-blur) var(--token-elevation-low-shadow-01-spread) var(--token-elevation-low-shadow-01-color), var(--token-elevation-low-shadow-02-x) var(--token-elevation-low-shadow-02-y) var(--token-elevation-low-shadow-02-blur) var(--token-elevation-low-shadow-02-spread) var(--token-elevation-low-shadow-02-color); }
|
|
15
|
+
.hds-surface-mid { box-shadow: 0 0 0 var(--token-elevation-mid-border-width) var(--token-elevation-mid-border-color), var(--token-elevation-mid-shadow-01-x) var(--token-elevation-mid-shadow-01-y) var(--token-elevation-mid-shadow-01-blur) var(--token-elevation-mid-shadow-01-spread) var(--token-elevation-mid-shadow-01-color), var(--token-elevation-mid-shadow-02-x) var(--token-elevation-mid-shadow-02-y) var(--token-elevation-mid-shadow-02-blur) var(--token-elevation-mid-shadow-02-spread) var(--token-elevation-mid-shadow-02-color); }
|
|
16
|
+
.hds-surface-high { box-shadow: 0 0 0 var(--token-elevation-high-border-width) var(--token-elevation-high-border-color), var(--token-elevation-high-shadow-01-x) var(--token-elevation-high-shadow-01-y) var(--token-elevation-high-shadow-01-blur) var(--token-elevation-high-shadow-01-spread) var(--token-elevation-high-shadow-01-color), var(--token-elevation-high-shadow-02-x) var(--token-elevation-high-shadow-02-y) var(--token-elevation-high-shadow-02-blur) var(--token-elevation-high-shadow-02-spread) var(--token-elevation-high-shadow-02-color); }
|
|
17
|
+
.hds-surface-higher { box-shadow: 0 0 0 var(--token-elevation-higher-border-width) var(--token-elevation-higher-border-color), var(--token-elevation-higher-shadow-01-x) var(--token-elevation-higher-shadow-01-y) var(--token-elevation-higher-shadow-01-blur) var(--token-elevation-higher-shadow-01-spread) var(--token-elevation-higher-shadow-01-color), var(--token-elevation-higher-shadow-02-x) var(--token-elevation-higher-shadow-02-y) var(--token-elevation-higher-shadow-02-blur) var(--token-elevation-higher-shadow-02-spread) var(--token-elevation-higher-shadow-02-color); }
|
|
18
|
+
.hds-surface-overlay { box-shadow: 0 0 0 var(--token-elevation-overlay-border-width) var(--token-elevation-overlay-border-color), var(--token-elevation-overlay-shadow-01-x) var(--token-elevation-overlay-shadow-01-y) var(--token-elevation-overlay-shadow-01-blur) var(--token-elevation-overlay-shadow-01-spread) var(--token-elevation-overlay-shadow-01-color), var(--token-elevation-overlay-shadow-02-x) var(--token-elevation-overlay-shadow-02-y) var(--token-elevation-overlay-shadow-02-blur) var(--token-elevation-overlay-shadow-02-spread) var(--token-elevation-overlay-shadow-02-color); }
|
package/products/css/tokens.css
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Fri, 07 Jan 2022 13:05:18 GMT
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
:root {
|
|
@@ -253,6 +253,13 @@
|
|
|
253
253
|
--token-spacing-05: 1.5rem; /* 24px, 1.5rem */
|
|
254
254
|
--token-spacing-06: 2rem; /* 32px, 2rem */
|
|
255
255
|
--token-spacing-07: 3rem; /* 48px, 3rem */
|
|
256
|
+
--token-typography-font-stack-display: -apple-system, BlinkMacSystemFont, SF Pro Display, Segoe UI Display, Ubuntu, sans-serif;
|
|
257
|
+
--token-typography-font-stack-text: -apple-system, BlinkMacSystemFont, SF Pro Text, Segoe UI Text, Ubuntu, sans-serif;
|
|
258
|
+
--token-typography-font-stack-code: SF Mono, Consolas, Ubuntu Mono, monospace;
|
|
259
|
+
--token-typography-font-weight-regular: 400;
|
|
260
|
+
--token-typography-font-weight-medium: 500;
|
|
261
|
+
--token-typography-font-weight-semibold: 600;
|
|
262
|
+
--token-typography-font-weight-bold: 700;
|
|
256
263
|
--token-typography-heading-0-font-family: -apple-system, BlinkMacSystemFont, SF Pro Display, Segoe UI Display, Ubuntu, sans-serif;
|
|
257
264
|
--token-typography-heading-0-font-size: 1.875rem; /* 30px/1.875rem */
|
|
258
265
|
--token-typography-heading-0-line-height: 1.2666; /* 38px */
|