@telus-uds/theme-koodo 4.12.4 → 4.13.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.
@@ -36,6 +36,10 @@
36
36
  "type": "variant",
37
37
  "values": [true]
38
38
  },
39
+ "inverse": {
40
+ "type": "variant",
41
+ "values": [true]
42
+ },
39
43
  "outline": {
40
44
  "type": "variant",
41
45
  "values": [true]
@@ -46,6 +50,31 @@
46
50
  }
47
51
  },
48
52
  "rules": [
53
+ {
54
+ "if": {
55
+ "inverse": true
56
+ },
57
+ "tokens": {
58
+ "backgroundColor": {
59
+ "red": 0,
60
+ "green": 0,
61
+ "blue": 0,
62
+ "alpha": 0
63
+ },
64
+ "borderColor": {
65
+ "red": 1,
66
+ "green": 1,
67
+ "blue": 1,
68
+ "alpha": 1
69
+ },
70
+ "color": {
71
+ "red": 1,
72
+ "green": 1,
73
+ "blue": 1,
74
+ "alpha": 1
75
+ }
76
+ }
77
+ },
49
78
  {
50
79
  "if": {
51
80
  "outline": true
@@ -3349,8 +3378,60 @@
3349
3378
  }
3350
3379
  },
3351
3380
  "Footnote": {
3352
- "appearances": {},
3353
- "rules": [],
3381
+ "appearances": {
3382
+ "viewport": {
3383
+ "description": "The size label for the current screen viewport based on the current screen width",
3384
+ "values": ["xs", "sm", "md", "lg", "xl"],
3385
+ "type": "state"
3386
+ }
3387
+ },
3388
+ "rules": [
3389
+ {
3390
+ "if": {
3391
+ "viewport": ["xs"]
3392
+ },
3393
+ "tokens": {
3394
+ "footnoteBodyPaddingBottom": 32,
3395
+ "footnoteBodyPaddingLeft": 16,
3396
+ "footnoteBodyPaddingRight": 16,
3397
+ "footnoteBodyPaddingTop": 0,
3398
+ "footnoteHeaderPaddingBottom": 16,
3399
+ "footnoteHeaderPaddingLeft": 16,
3400
+ "footnoteHeaderPaddingRight": 4,
3401
+ "footnoteHeaderPaddingTop": 16
3402
+ }
3403
+ },
3404
+ {
3405
+ "if": {
3406
+ "viewport": ["md", "lg"]
3407
+ },
3408
+ "tokens": {
3409
+ "footnoteBodyPaddingBottom": 40,
3410
+ "footnoteBodyPaddingLeft": 16,
3411
+ "footnoteBodyPaddingRight": 16,
3412
+ "footnoteBodyPaddingTop": 0,
3413
+ "footnoteHeaderPaddingBottom": 24,
3414
+ "footnoteHeaderPaddingLeft": 16,
3415
+ "footnoteHeaderPaddingRight": 4,
3416
+ "footnoteHeaderPaddingTop": 24
3417
+ }
3418
+ },
3419
+ {
3420
+ "if": {
3421
+ "viewport": ["xl"]
3422
+ },
3423
+ "tokens": {
3424
+ "footnoteBodyPaddingBottom": 40,
3425
+ "footnoteBodyPaddingLeft": 16,
3426
+ "footnoteBodyPaddingRight": 16,
3427
+ "footnoteBodyPaddingTop": 0,
3428
+ "footnoteHeaderPaddingBottom": 24,
3429
+ "footnoteHeaderPaddingLeft": 16,
3430
+ "footnoteHeaderPaddingRight": 16,
3431
+ "footnoteHeaderPaddingTop": 24
3432
+ }
3433
+ }
3434
+ ],
3354
3435
  "tokens": {
3355
3436
  "closeButtonBackgroundColor": {
3356
3437
  "red": 1,
@@ -3385,7 +3466,7 @@
3385
3466
  "blue": 1,
3386
3467
  "alpha": 1
3387
3468
  },
3388
- "footnoteBodyPaddingBottom": 32,
3469
+ "footnoteBodyPaddingBottom": 40,
3389
3470
  "footnoteBodyPaddingLeft": 16,
3390
3471
  "footnoteBodyPaddingRight": 16,
3391
3472
  "footnoteBodyPaddingTop": 0,
@@ -3396,10 +3477,10 @@
3396
3477
  "alpha": 1
3397
3478
  },
3398
3479
  "footnoteBorderTopSizeMd": 1,
3399
- "footnoteHeaderPaddingBottom": 16,
3480
+ "footnoteHeaderPaddingBottom": 24,
3400
3481
  "footnoteHeaderPaddingLeft": 16,
3401
- "footnoteHeaderPaddingRight": 16,
3402
- "footnoteHeaderPaddingTop": 16,
3482
+ "footnoteHeaderPaddingRight": 4,
3483
+ "footnoteHeaderPaddingTop": 24,
3403
3484
  "headerFontName": "StagSans",
3404
3485
  "headerFontSize": 16,
3405
3486
  "headerFontWeight": 700,
@@ -36,6 +36,10 @@
36
36
  "type": "variant",
37
37
  "values": [true]
38
38
  },
39
+ "inverse": {
40
+ "type": "variant",
41
+ "values": [true]
42
+ },
39
43
  "outline": {
40
44
  "type": "variant",
41
45
  "values": [true]
@@ -46,6 +50,31 @@
46
50
  }
47
51
  },
48
52
  "rules": [
53
+ {
54
+ "if": {
55
+ "inverse": true
56
+ },
57
+ "tokens": {
58
+ "backgroundColor": {
59
+ "red": 0,
60
+ "green": 0,
61
+ "blue": 0,
62
+ "alpha": 0
63
+ },
64
+ "borderColor": {
65
+ "red": 1,
66
+ "green": 1,
67
+ "blue": 1,
68
+ "alpha": 1
69
+ },
70
+ "color": {
71
+ "red": 1,
72
+ "green": 1,
73
+ "blue": 1,
74
+ "alpha": 1
75
+ }
76
+ }
77
+ },
49
78
  {
50
79
  "if": {
51
80
  "outline": true
@@ -3349,8 +3378,60 @@
3349
3378
  }
3350
3379
  },
3351
3380
  "Footnote": {
3352
- "appearances": {},
3353
- "rules": [],
3381
+ "appearances": {
3382
+ "viewport": {
3383
+ "description": "The size label for the current screen viewport based on the current screen width",
3384
+ "values": ["xs", "sm", "md", "lg", "xl"],
3385
+ "type": "state"
3386
+ }
3387
+ },
3388
+ "rules": [
3389
+ {
3390
+ "if": {
3391
+ "viewport": ["xs"]
3392
+ },
3393
+ "tokens": {
3394
+ "footnoteBodyPaddingBottom": 32,
3395
+ "footnoteBodyPaddingLeft": 16,
3396
+ "footnoteBodyPaddingRight": 16,
3397
+ "footnoteBodyPaddingTop": 0,
3398
+ "footnoteHeaderPaddingBottom": 16,
3399
+ "footnoteHeaderPaddingLeft": 16,
3400
+ "footnoteHeaderPaddingRight": 4,
3401
+ "footnoteHeaderPaddingTop": 16
3402
+ }
3403
+ },
3404
+ {
3405
+ "if": {
3406
+ "viewport": ["md", "lg"]
3407
+ },
3408
+ "tokens": {
3409
+ "footnoteBodyPaddingBottom": 40,
3410
+ "footnoteBodyPaddingLeft": 16,
3411
+ "footnoteBodyPaddingRight": 16,
3412
+ "footnoteBodyPaddingTop": 0,
3413
+ "footnoteHeaderPaddingBottom": 24,
3414
+ "footnoteHeaderPaddingLeft": 16,
3415
+ "footnoteHeaderPaddingRight": 4,
3416
+ "footnoteHeaderPaddingTop": 24
3417
+ }
3418
+ },
3419
+ {
3420
+ "if": {
3421
+ "viewport": ["xl"]
3422
+ },
3423
+ "tokens": {
3424
+ "footnoteBodyPaddingBottom": 40,
3425
+ "footnoteBodyPaddingLeft": 16,
3426
+ "footnoteBodyPaddingRight": 16,
3427
+ "footnoteBodyPaddingTop": 0,
3428
+ "footnoteHeaderPaddingBottom": 24,
3429
+ "footnoteHeaderPaddingLeft": 16,
3430
+ "footnoteHeaderPaddingRight": 16,
3431
+ "footnoteHeaderPaddingTop": 24
3432
+ }
3433
+ }
3434
+ ],
3354
3435
  "tokens": {
3355
3436
  "closeButtonBackgroundColor": {
3356
3437
  "red": 1,
@@ -3385,7 +3466,7 @@
3385
3466
  "blue": 1,
3386
3467
  "alpha": 1
3387
3468
  },
3388
- "footnoteBodyPaddingBottom": 32,
3469
+ "footnoteBodyPaddingBottom": 40,
3389
3470
  "footnoteBodyPaddingLeft": 16,
3390
3471
  "footnoteBodyPaddingRight": 16,
3391
3472
  "footnoteBodyPaddingTop": 0,
@@ -3396,10 +3477,10 @@
3396
3477
  "alpha": 1
3397
3478
  },
3398
3479
  "footnoteBorderTopSizeMd": 1,
3399
- "footnoteHeaderPaddingBottom": 16,
3480
+ "footnoteHeaderPaddingBottom": 24,
3400
3481
  "footnoteHeaderPaddingLeft": 16,
3401
- "footnoteHeaderPaddingRight": 16,
3402
- "footnoteHeaderPaddingTop": 16,
3482
+ "footnoteHeaderPaddingRight": 4,
3483
+ "footnoteHeaderPaddingTop": 24,
3403
3484
  "headerFontName": "StagSans",
3404
3485
  "headerFontSize": 16,
3405
3486
  "headerFontWeight": 700,
package/build/rn/theme.js CHANGED
@@ -1,7 +1,7 @@
1
1
  /*
2
2
  *
3
3
  * Do not edit directly
4
- * Generated on Mon, 16 Oct 2023 22:46:48 GMT
4
+ * Generated on Thu, 19 Oct 2023 00:20:57 GMT
5
5
  *
6
6
  */
7
7
 
@@ -54,10 +54,19 @@ module.exports = {
54
54
  Badge: {
55
55
  appearances: {
56
56
  alternative: { type: 'variant', values: [ true ] },
57
+ inverse: { type: 'variant', values: [ true ] },
57
58
  outline: { type: 'variant', values: [ true ] },
58
59
  purpose: { type: 'variant', values: [ 'offer', 'editorial' ] }
59
60
  },
60
61
  rules: [
62
+ {
63
+ if: { inverse: true },
64
+ tokens: {
65
+ backgroundColor: 'rgba(0, 0, 0, 0)',
66
+ borderColor: '#ffffff',
67
+ color: '#ffffff'
68
+ }
69
+ },
61
70
  {
62
71
  if: { outline: true },
63
72
  tokens: {
@@ -1942,8 +1951,54 @@ module.exports = {
1942
1951
  }
1943
1952
  },
1944
1953
  Footnote: {
1945
- appearances: {},
1946
- rules: [],
1954
+ appearances: {
1955
+ viewport: {
1956
+ description: 'The size label for the current screen viewport based on the current screen width',
1957
+ type: 'state',
1958
+ values: [ 'xs', 'sm', 'md', 'lg', 'xl' ]
1959
+ }
1960
+ },
1961
+ rules: [
1962
+ {
1963
+ if: { viewport: [ 'xs' ] },
1964
+ tokens: {
1965
+ footnoteBodyPaddingBottom: 32,
1966
+ footnoteBodyPaddingLeft: 16,
1967
+ footnoteBodyPaddingRight: 16,
1968
+ footnoteBodyPaddingTop: 0,
1969
+ footnoteHeaderPaddingBottom: 16,
1970
+ footnoteHeaderPaddingLeft: 16,
1971
+ footnoteHeaderPaddingRight: 4,
1972
+ footnoteHeaderPaddingTop: 16
1973
+ }
1974
+ },
1975
+ {
1976
+ if: { viewport: [ 'md', 'lg' ] },
1977
+ tokens: {
1978
+ footnoteBodyPaddingBottom: 40,
1979
+ footnoteBodyPaddingLeft: 16,
1980
+ footnoteBodyPaddingRight: 16,
1981
+ footnoteBodyPaddingTop: 0,
1982
+ footnoteHeaderPaddingBottom: 24,
1983
+ footnoteHeaderPaddingLeft: 16,
1984
+ footnoteHeaderPaddingRight: 4,
1985
+ footnoteHeaderPaddingTop: 24
1986
+ }
1987
+ },
1988
+ {
1989
+ if: { viewport: [ 'xl' ] },
1990
+ tokens: {
1991
+ footnoteBodyPaddingBottom: 40,
1992
+ footnoteBodyPaddingLeft: 16,
1993
+ footnoteBodyPaddingRight: 16,
1994
+ footnoteBodyPaddingTop: 0,
1995
+ footnoteHeaderPaddingBottom: 24,
1996
+ footnoteHeaderPaddingLeft: 16,
1997
+ footnoteHeaderPaddingRight: 16,
1998
+ footnoteHeaderPaddingTop: 24
1999
+ }
2000
+ }
2001
+ ],
1947
2002
  tokens: {
1948
2003
  closeButtonBackgroundColor: '#ffffff',
1949
2004
  closeButtonBorderColor: '#000000',
@@ -1958,16 +2013,16 @@ module.exports = {
1958
2013
  closeIcon: PaletteIconClose,
1959
2014
  footnoteBackground: '#ffffff',
1960
2015
  footnoteBodyBackground: '#ffffff',
1961
- footnoteBodyPaddingBottom: 32,
2016
+ footnoteBodyPaddingBottom: 40,
1962
2017
  footnoteBodyPaddingLeft: 16,
1963
2018
  footnoteBodyPaddingRight: 16,
1964
2019
  footnoteBodyPaddingTop: 0,
1965
2020
  footnoteBorderColorMd: '#c9c8c8',
1966
2021
  footnoteBorderTopSizeMd: 1,
1967
- footnoteHeaderPaddingBottom: 16,
2022
+ footnoteHeaderPaddingBottom: 24,
1968
2023
  footnoteHeaderPaddingLeft: 16,
1969
- footnoteHeaderPaddingRight: 16,
1970
- footnoteHeaderPaddingTop: 16,
2024
+ footnoteHeaderPaddingRight: 4,
2025
+ footnoteHeaderPaddingTop: 24,
1971
2026
  headerFontName: 'StagSans',
1972
2027
  headerFontSize: 16,
1973
2028
  headerFontWeight: '700',
package/package.json CHANGED
@@ -31,5 +31,5 @@
31
31
  "build": "UDS_PALETTE=@telus-uds/palette-koodo system-tokens-build-theme",
32
32
  "dev": "nodemon -w src -x 'npm run build'"
33
33
  },
34
- "version": "4.12.4"
34
+ "version": "4.13.0"
35
35
  }
package/theme.json CHANGED
@@ -31,6 +31,10 @@
31
31
  "type": "variant",
32
32
  "values": [true]
33
33
  },
34
+ "inverse": {
35
+ "type": "variant",
36
+ "values": [true]
37
+ },
34
38
  "outline": {
35
39
  "type": "variant",
36
40
  "values": [true]
@@ -41,6 +45,16 @@
41
45
  }
42
46
  },
43
47
  "rules": [
48
+ {
49
+ "if": {
50
+ "inverse": true
51
+ },
52
+ "tokens": {
53
+ "backgroundColor": "{palette.color.transparent}",
54
+ "borderColor": "{palette.color.white}",
55
+ "color": "{palette.color.white}"
56
+ }
57
+ },
44
58
  {
45
59
  "if": {
46
60
  "outline": true
@@ -2593,8 +2607,56 @@
2593
2607
  }
2594
2608
  },
2595
2609
  "Footnote": {
2596
- "appearances": {},
2597
- "rules": [],
2610
+ "appearances": {
2611
+ "viewport": "{appearances.system.viewport}"
2612
+ },
2613
+ "rules": [
2614
+ {
2615
+ "if": {
2616
+ "viewport": ["xs"]
2617
+ },
2618
+ "tokens": {
2619
+ "footnoteBodyPaddingBottom": "{palette.size.size32}",
2620
+ "footnoteBodyPaddingLeft": "{palette.size.size16}",
2621
+ "footnoteBodyPaddingRight": "{palette.size.size16}",
2622
+ "footnoteBodyPaddingTop": "{palette.size.size0}",
2623
+ "footnoteHeaderPaddingBottom": "{palette.size.size16}",
2624
+ "footnoteHeaderPaddingLeft": "{palette.size.size16}",
2625
+ "footnoteHeaderPaddingRight": "{palette.size.size4}",
2626
+ "footnoteHeaderPaddingTop": "{palette.size.size16}"
2627
+ }
2628
+ },
2629
+ {
2630
+ "if": {
2631
+ "viewport": ["md", "lg"]
2632
+ },
2633
+ "tokens": {
2634
+ "footnoteBodyPaddingBottom": "{palette.size.size40}",
2635
+ "footnoteBodyPaddingLeft": "{palette.size.size16}",
2636
+ "footnoteBodyPaddingRight": "{palette.size.size16}",
2637
+ "footnoteBodyPaddingTop": "{palette.size.size0}",
2638
+ "footnoteHeaderPaddingBottom": "{palette.size.size24}",
2639
+ "footnoteHeaderPaddingLeft": "{palette.size.size16}",
2640
+ "footnoteHeaderPaddingRight": "{palette.size.size4}",
2641
+ "footnoteHeaderPaddingTop": "{palette.size.size24}"
2642
+ }
2643
+ },
2644
+ {
2645
+ "if": {
2646
+ "viewport": ["xl"]
2647
+ },
2648
+ "tokens": {
2649
+ "footnoteBodyPaddingBottom": "{palette.size.size40}",
2650
+ "footnoteBodyPaddingLeft": "{palette.size.size16}",
2651
+ "footnoteBodyPaddingRight": "{palette.size.size16}",
2652
+ "footnoteBodyPaddingTop": "{palette.size.size0}",
2653
+ "footnoteHeaderPaddingBottom": "{palette.size.size24}",
2654
+ "footnoteHeaderPaddingLeft": "{palette.size.size16}",
2655
+ "footnoteHeaderPaddingRight": "{palette.size.size16}",
2656
+ "footnoteHeaderPaddingTop": "{palette.size.size24}"
2657
+ }
2658
+ }
2659
+ ],
2598
2660
  "tokens": {
2599
2661
  "closeButtonBackgroundColor": "{palette.color.white}",
2600
2662
  "closeButtonBorderColor": "{palette.color.black}",
@@ -2609,16 +2671,16 @@
2609
2671
  "closeIcon": "{palette.icon.Close}",
2610
2672
  "footnoteBackground": "{palette.color.white}",
2611
2673
  "footnoteBodyBackground": "{palette.color.white}",
2612
- "footnoteBodyPaddingBottom": "{palette.size.size32}",
2674
+ "footnoteBodyPaddingBottom": "{palette.size.size40}",
2613
2675
  "footnoteBodyPaddingLeft": "{palette.size.size16}",
2614
2676
  "footnoteBodyPaddingRight": "{palette.size.size16}",
2615
2677
  "footnoteBodyPaddingTop": "{palette.size.size0}",
2616
2678
  "footnoteBorderColorMd": "{palette.color.silver}",
2617
2679
  "footnoteBorderTopSizeMd": "{palette.border.border1}",
2618
- "footnoteHeaderPaddingBottom": "{palette.size.size16}",
2680
+ "footnoteHeaderPaddingBottom": "{palette.size.size24}",
2619
2681
  "footnoteHeaderPaddingLeft": "{palette.size.size16}",
2620
- "footnoteHeaderPaddingRight": "{palette.size.size16}",
2621
- "footnoteHeaderPaddingTop": "{palette.size.size16}",
2682
+ "footnoteHeaderPaddingRight": "{palette.size.size4}",
2683
+ "footnoteHeaderPaddingTop": "{palette.size.size24}",
2622
2684
  "headerFontName": "{palette.fontName.StagSans}",
2623
2685
  "headerFontSize": "{palette.size.size16}",
2624
2686
  "headerFontWeight": "{palette.fontWeight.weight700}",