@pantheon-systems/pds-design-tokens 2.0.0-alpha.3 → 2.0.0-alpha.4

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 (6) hide show
  1. package/build/css/variables.global.css +6 -5
  2. package/build/figma/tokens.json +23 -6
  3. package/build/js/variables.d.ts +4 -3
  4. package/build/js/variables.js +6 -5
  5. package/build/json/tokens.json +37 -16
  6. package/package.json +1 -1
package/build/css/variables.global.css CHANGED
@@ -9,19 +9,20 @@
9
9
  --pds-animation-transition-focus: outline, outline-offset, box-shadow, border-color 200ms cubic-bezier(.2, 0, 0, 1) 200ms;
10
10
  --pds-animation-transition-input: border-color, background-color, box-shadow, outline 200ms cubic-bezier(.2, 0, 0, 1) 200ms;
11
11
  --pds-animation-transition-link: color, text-decoration-color 200ms cubic-bezier(.2, 0, 0, 1) 200ms;
12
- --pds-animation-transition-reveal: all 300ms cubic-bezier(.2, 0, 0, 1);
13
- --pds-animation-transition-rotation: transform 200ms cubic-bezier(.2, 0, 0, 1) 200ms;
12
+ --pds-animation-transition-reveal: height, opacity, padding, width 300ms cubic-bezier(.2, 0, 0, 1);
13
+ --pds-animation-transition-rotation: transform 200ms cubic-bezier(.2, 0, 0, 1);
14
14
  --pds-border-width-stepper: 3px;
15
15
  --pds-border-width-default: 1px;
16
+ --pds-border-width-thicker: 2px;
16
17
  --pds-border-width-outline: 1px;
17
18
  --pds-border-radius-default: 0.188rem;
18
19
  --pds-border-radius-bar: 3.5rem;
19
20
  --pds-border-radius-button: 3.5rem;
20
21
  --pds-border-radius-container: 0.375rem;
21
22
  --pds-border-radius-input: 0.25rem;
22
- --pds-container-modal-width-small: 25rem;
23
- --pds-container-modal-width-medium: 37.5rem;
24
- --pds-container-modal-width-large: 47.5rem;
23
+ --pds-container-modal-width-sm: 25rem;
24
+ --pds-container-modal-width-md: 37.5rem;
25
+ --pds-container-modal-width-lg: 47.5rem;
25
26
  --pds-container-modal-width-xl: 67.5rem;
26
27
  --pds-container-tooltip-max-width: 12.5rem;
27
28
  --pds-container-padding-base: var(--pds-spacing-xl);
package/build/figma/tokens.json CHANGED
@@ -638,6 +638,23 @@
638
638
  }
639
639
  }
640
640
  },
641
+ "thicker": {
642
+ "value": 2,
643
+ "type": "dimension",
644
+ "$extensions": {
645
+ "public": true,
646
+ "defaultUnit": "px",
647
+ "com.figma": {
648
+ "scopes": [
649
+ "STROKE_FLOAT"
650
+ ],
651
+ "exportAs": "variable",
652
+ "codeSyntax": {
653
+ "WEB": "--pds-border-width-thicker"
654
+ }
655
+ }
656
+ }
657
+ },
641
658
  "outline": {
642
659
  "value": 1,
643
660
  "type": "dimension",
@@ -844,7 +861,7 @@
844
861
  "container": {
845
862
  "modal": {
846
863
  "width": {
847
- "small": {
864
+ "sm": {
848
865
  "value": 400,
849
866
  "type": "dimension",
850
867
  "$extensions": {
@@ -856,12 +873,12 @@
856
873
  ],
857
874
  "exportAs": "variable",
858
875
  "codeSyntax": {
859
- "WEB": "--pds-container-modal-width-small"
876
+ "WEB": "--pds-container-modal-width-sm"
860
877
  }
861
878
  }
862
879
  }
863
880
  },
864
- "medium": {
881
+ "md": {
865
882
  "value": 600,
866
883
  "type": "dimension",
867
884
  "$extensions": {
@@ -873,12 +890,12 @@
873
890
  ],
874
891
  "exportAs": "variable",
875
892
  "codeSyntax": {
876
- "WEB": "--pds-container-modal-width-medium"
893
+ "WEB": "--pds-container-modal-width-md"
877
894
  }
878
895
  }
879
896
  }
880
897
  },
881
- "large": {
898
+ "lg": {
882
899
  "value": 760,
883
900
  "type": "dimension",
884
901
  "$extensions": {
@@ -890,7 +907,7 @@
890
907
  ],
891
908
  "exportAs": "variable",
892
909
  "codeSyntax": {
893
- "WEB": "--pds-container-modal-width-large"
910
+ "WEB": "--pds-container-modal-width-lg"
894
911
  }
895
912
  }
896
913
  }
package/build/js/variables.d.ts CHANGED
@@ -16,15 +16,16 @@ export const ANIMATION_TRANSITION_REVEAL: string;
16
16
  export const ANIMATION_TRANSITION_ROTATION: string;
17
17
  export const BORDER_WIDTH_STEPPER: string;
18
18
  export const BORDER_WIDTH_DEFAULT: string;
19
+ export const BORDER_WIDTH_THICKER: string;
19
20
  export const BORDER_WIDTH_OUTLINE: string;
20
21
  export const BORDER_RADIUS_DEFAULT: string;
21
22
  export const BORDER_RADIUS_BAR: string;
22
23
  export const BORDER_RADIUS_BUTTON: string;
23
24
  export const BORDER_RADIUS_CONTAINER: string;
24
25
  export const BORDER_RADIUS_INPUT: string;
25
- export const CONTAINER_MODAL_WIDTH_SMALL: string;
26
- export const CONTAINER_MODAL_WIDTH_MEDIUM: string;
27
- export const CONTAINER_MODAL_WIDTH_LARGE: string;
26
+ export const CONTAINER_MODAL_WIDTH_SM: string;
27
+ export const CONTAINER_MODAL_WIDTH_MD: string;
28
+ export const CONTAINER_MODAL_WIDTH_LG: string;
28
29
  export const CONTAINER_MODAL_WIDTH_XL: string;
29
30
  export const CONTAINER_TOOLTIP_MAX_WIDTH: string;
30
31
  export const CONTAINER_PADDING_BASE: string;
package/build/js/variables.js CHANGED
@@ -18,20 +18,21 @@ export const ANIMATION_TRANSITION_INPUT =
18
18
  export const ANIMATION_TRANSITION_LINK =
19
19
  "color, text-decoration-color 200ms cubic-bezier(.2, 0, 0, 1) 200ms";
20
20
  export const ANIMATION_TRANSITION_REVEAL =
21
- "all 300ms cubic-bezier(.2, 0, 0, 1)";
21
+ "height, opacity, padding, width 300ms cubic-bezier(.2, 0, 0, 1)";
22
22
  export const ANIMATION_TRANSITION_ROTATION =
23
- "transform 200ms cubic-bezier(.2, 0, 0, 1) 200ms";
23
+ "transform 200ms cubic-bezier(.2, 0, 0, 1)";
24
24
  export const BORDER_WIDTH_STEPPER = "3px";
25
25
  export const BORDER_WIDTH_DEFAULT = "1px";
26
+ export const BORDER_WIDTH_THICKER = "2px";
26
27
  export const BORDER_WIDTH_OUTLINE = "1px";
27
28
  export const BORDER_RADIUS_DEFAULT = "0.1875rem";
28
29
  export const BORDER_RADIUS_BAR = "3.5rem";
29
30
  export const BORDER_RADIUS_BUTTON = "3.5rem";
30
31
  export const BORDER_RADIUS_CONTAINER = "0.375rem";
31
32
  export const BORDER_RADIUS_INPUT = "0.25rem";
32
- export const CONTAINER_MODAL_WIDTH_SMALL = "25rem";
33
- export const CONTAINER_MODAL_WIDTH_MEDIUM = "37.5rem";
34
- export const CONTAINER_MODAL_WIDTH_LARGE = "47.5rem";
33
+ export const CONTAINER_MODAL_WIDTH_SM = "25rem";
34
+ export const CONTAINER_MODAL_WIDTH_MD = "37.5rem";
35
+ export const CONTAINER_MODAL_WIDTH_LG = "47.5rem";
35
36
  export const CONTAINER_MODAL_WIDTH_XL = "67.5rem";
36
37
  export const CONTAINER_TOOLTIP_MAX_WIDTH = "12.5rem";
37
38
  export const CONTAINER_PADDING_BASE = "1.44rem";
package/build/json/tokens.json CHANGED
@@ -218,11 +218,11 @@
218
218
  "public": true
219
219
  },
220
220
  "reveal": {
221
- "value": "all 300ms cubic-bezier(.2, 0, 0, 1)",
221
+ "value": "height, opacity, padding, width 300ms cubic-bezier(.2, 0, 0, 1)",
222
222
  "filePath": "tokens/animation/semantic/semantic.json",
223
223
  "isSource": true,
224
224
  "original": {
225
- "value": "all {animation.duration.reveal} {animation.timing-function.default}",
225
+ "value": "height, opacity, padding, width {animation.duration.reveal} {animation.timing-function.default}",
226
226
  "public": true
227
227
  },
228
228
  "name": "AnimationTransitionReveal",
@@ -239,11 +239,11 @@
239
239
  "public": true
240
240
  },
241
241
  "rotation": {
242
- "value": "transform 200ms cubic-bezier(.2, 0, 0, 1) 200ms",
242
+ "value": "transform 200ms cubic-bezier(.2, 0, 0, 1)",
243
243
  "filePath": "tokens/animation/semantic/semantic.json",
244
244
  "isSource": true,
245
245
  "original": {
246
- "value": "transform {animation.duration.default} {animation.timing-function.default} {animation.delay.default}",
246
+ "value": "transform {animation.duration.default} {animation.timing-function.default}",
247
247
  "public": true
248
248
  },
249
249
  "name": "AnimationTransitionRotation",
@@ -305,6 +305,27 @@
305
305
  ],
306
306
  "public": true
307
307
  },
308
+ "thicker": {
309
+ "value": 2,
310
+ "filePath": "tokens/border/semantic/width.json",
311
+ "isSource": true,
312
+ "original": {
313
+ "value": 2,
314
+ "public": true
315
+ },
316
+ "name": "BorderWidthThicker",
317
+ "attributes": {
318
+ "category": "border",
319
+ "type": "width",
320
+ "item": "thicker"
321
+ },
322
+ "path": [
323
+ "border",
324
+ "width",
325
+ "thicker"
326
+ ],
327
+ "public": true
328
+ },
308
329
  "outline": {
309
330
  "value": 1,
310
331
  "filePath": "tokens/border/semantic/width.json",
@@ -438,7 +459,7 @@
438
459
  "container": {
439
460
  "modal": {
440
461
  "width": {
441
- "small": {
462
+ "sm": {
442
463
  "value": "25",
443
464
  "filePath": "tokens/container/component/component.json",
444
465
  "isSource": true,
@@ -446,22 +467,22 @@
446
467
  "value": "25",
447
468
  "public": true
448
469
  },
449
- "name": "ContainerModalWidthSmall",
470
+ "name": "ContainerModalWidthSm",
450
471
  "attributes": {
451
472
  "category": "container",
452
473
  "type": "modal",
453
474
  "item": "width",
454
- "subitem": "small"
475
+ "subitem": "sm"
455
476
  },
456
477
  "path": [
457
478
  "container",
458
479
  "modal",
459
480
  "width",
460
- "small"
481
+ "sm"
461
482
  ],
462
483
  "public": true
463
484
  },
464
- "medium": {
485
+ "md": {
465
486
  "value": "37.5",
466
487
  "filePath": "tokens/container/component/component.json",
467
488
  "isSource": true,
@@ -469,22 +490,22 @@
469
490
  "value": "37.5",
470
491
  "public": true
471
492
  },
472
- "name": "ContainerModalWidthMedium",
493
+ "name": "ContainerModalWidthMd",
473
494
  "attributes": {
474
495
  "category": "container",
475
496
  "type": "modal",
476
497
  "item": "width",
477
- "subitem": "medium"
498
+ "subitem": "md"
478
499
  },
479
500
  "path": [
480
501
  "container",
481
502
  "modal",
482
503
  "width",
483
- "medium"
504
+ "md"
484
505
  ],
485
506
  "public": true
486
507
  },
487
- "large": {
508
+ "lg": {
488
509
  "value": "47.5",
489
510
  "filePath": "tokens/container/component/component.json",
490
511
  "isSource": true,
@@ -492,18 +513,18 @@
492
513
  "value": "47.5",
493
514
  "public": true
494
515
  },
495
- "name": "ContainerModalWidthLarge",
516
+ "name": "ContainerModalWidthLg",
496
517
  "attributes": {
497
518
  "category": "container",
498
519
  "type": "modal",
499
520
  "item": "width",
500
- "subitem": "large"
521
+ "subitem": "lg"
501
522
  },
502
523
  "path": [
503
524
  "container",
504
525
  "modal",
505
526
  "width",
506
- "large"
527
+ "lg"
507
528
  ],
508
529
  "public": true
509
530
  },
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.3",
4
+ "version": "2.0.0-alpha.4",
5
5
  "publishConfig": {
6
6
  "access": "public",
7
7
  "registry": "https://registry.npmjs.org/",