@pantheon-systems/pds-design-tokens 1.0.0 → 1.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.
Files changed (6) hide show
  1. package/build/css/pds-design-tokens-dark-mode.css +5 -0
  2. package/build/css/pds-design-tokens-light-mode.css +5 -0
  3. package/build/figma/pds-design-tokens-figma.json +286 -0
  4. package/build/json/pds-design-tokens-dark-mode.json +143 -0
  5. package/build/json/pds-design-tokens-light-mode.json +143 -0
  6. package/package.json +1 -1
package/build/css/pds-design-tokens-dark-mode.css CHANGED
@@ -122,6 +122,11 @@
122
122
  --pds-color-dashboard-nav-item-foreground-hover: var(--pds-color-fg-default);
123
123
  --pds-color-dashboard-toggle-button-background: var(--pds-color-bg-reverse);
124
124
  --pds-color-dashboard-toggle-button-foreground: var(--pds-color-fg-reverse);
125
+ --pds-color-datepicker-accent-foreground: #745dd8;
126
+ --pds-color-datepicker-range-background: #2c205e;
127
+ --pds-color-datepicker-range-foreground: #ffffff;
128
+ --pds-color-datepicker-selected-background: #745dd8;
129
+ --pds-color-datepicker-selected-foreground: #ffffff;
125
130
  --pds-color-dropdown-background: #20232c;
126
131
  --pds-color-dropdown-description: var(--pds-color-fg-default-secondary);
127
132
  --pds-color-dropdown-foreground: var(--pds-color-fg-default);
package/build/css/pds-design-tokens-light-mode.css CHANGED
@@ -162,6 +162,11 @@
162
162
  --pds-color-datavis-3: #008d6f;
163
163
  --pds-color-datavis-4: #62ad43;
164
164
  --pds-color-datavis-5: #ddbd16;
165
+ --pds-color-datepicker-accent-foreground: #4f32ce;
166
+ --pds-color-datepicker-range-background: #f4f3fc;
167
+ --pds-color-datepicker-range-foreground: #000000;
168
+ --pds-color-datepicker-selected-background: #4f32ce;
169
+ --pds-color-datepicker-selected-foreground: #ffffff;
165
170
  --pds-color-dropdown-background: var(--pds-color-bg-default);
166
171
  --pds-color-dropdown-description: var(--pds-color-fg-default-secondary);
167
172
  --pds-color-dropdown-foreground: var(--pds-color-fg-default);
package/build/figma/pds-design-tokens-figma.json CHANGED
@@ -6990,6 +6990,149 @@
6990
6990
  }
6991
6991
  }
6992
6992
  },
6993
+ "datepicker": {
6994
+ "accent": {
6995
+ "foreground": {
6996
+ "value": "#745dd8",
6997
+ "public": true,
6998
+ "isReferenceToInternal": true,
6999
+ "filePath": "tokens/color/component/datepicker.dark.json",
7000
+ "isSource": true,
7001
+ "original": {
7002
+ "value": "{color.dark-mode.brand.primary.400.value}",
7003
+ "public": true,
7004
+ "isReferenceToInternal": true
7005
+ },
7006
+ "name": "color-dark-mode-datepicker-accent-foreground",
7007
+ "attributes": {
7008
+ "category": "color",
7009
+ "type": "dark-mode",
7010
+ "item": "datepicker",
7011
+ "subitem": "accent",
7012
+ "state": "foreground"
7013
+ },
7014
+ "path": [
7015
+ "color",
7016
+ "dark-mode",
7017
+ "datepicker",
7018
+ "accent",
7019
+ "foreground"
7020
+ ]
7021
+ }
7022
+ },
7023
+ "range": {
7024
+ "background": {
7025
+ "value": "#2c205e",
7026
+ "public": true,
7027
+ "isReferenceToInternal": true,
7028
+ "filePath": "tokens/color/component/datepicker.dark.json",
7029
+ "isSource": true,
7030
+ "original": {
7031
+ "value": "{color.dark-mode.brand.primary.600.value}",
7032
+ "public": true,
7033
+ "isReferenceToInternal": true
7034
+ },
7035
+ "name": "color-dark-mode-datepicker-range-background",
7036
+ "attributes": {
7037
+ "category": "color",
7038
+ "type": "dark-mode",
7039
+ "item": "datepicker",
7040
+ "subitem": "range",
7041
+ "state": "background"
7042
+ },
7043
+ "path": [
7044
+ "color",
7045
+ "dark-mode",
7046
+ "datepicker",
7047
+ "range",
7048
+ "background"
7049
+ ]
7050
+ },
7051
+ "foreground": {
7052
+ "value": "#ffffff",
7053
+ "public": true,
7054
+ "isReferenceToInternal": true,
7055
+ "filePath": "tokens/color/component/datepicker.dark.json",
7056
+ "isSource": true,
7057
+ "original": {
7058
+ "value": "{color.dark-mode.neutral.000.value}",
7059
+ "public": true,
7060
+ "isReferenceToInternal": true
7061
+ },
7062
+ "name": "color-dark-mode-datepicker-range-foreground",
7063
+ "attributes": {
7064
+ "category": "color",
7065
+ "type": "dark-mode",
7066
+ "item": "datepicker",
7067
+ "subitem": "range",
7068
+ "state": "foreground"
7069
+ },
7070
+ "path": [
7071
+ "color",
7072
+ "dark-mode",
7073
+ "datepicker",
7074
+ "range",
7075
+ "foreground"
7076
+ ]
7077
+ }
7078
+ },
7079
+ "selected": {
7080
+ "background": {
7081
+ "value": "#745dd8",
7082
+ "public": true,
7083
+ "isReferenceToInternal": true,
7084
+ "filePath": "tokens/color/component/datepicker.dark.json",
7085
+ "isSource": true,
7086
+ "original": {
7087
+ "value": "{color.dark-mode.brand.primary.400.value}",
7088
+ "public": true,
7089
+ "isReferenceToInternal": true
7090
+ },
7091
+ "name": "color-dark-mode-datepicker-selected-background",
7092
+ "attributes": {
7093
+ "category": "color",
7094
+ "type": "dark-mode",
7095
+ "item": "datepicker",
7096
+ "subitem": "selected",
7097
+ "state": "background"
7098
+ },
7099
+ "path": [
7100
+ "color",
7101
+ "dark-mode",
7102
+ "datepicker",
7103
+ "selected",
7104
+ "background"
7105
+ ]
7106
+ },
7107
+ "foreground": {
7108
+ "value": "#ffffff",
7109
+ "public": true,
7110
+ "isReferenceToInternal": true,
7111
+ "filePath": "tokens/color/component/datepicker.dark.json",
7112
+ "isSource": true,
7113
+ "original": {
7114
+ "value": "{color.dark-mode.neutral.000.value}",
7115
+ "public": true,
7116
+ "isReferenceToInternal": true
7117
+ },
7118
+ "name": "color-dark-mode-datepicker-selected-foreground",
7119
+ "attributes": {
7120
+ "category": "color",
7121
+ "type": "dark-mode",
7122
+ "item": "datepicker",
7123
+ "subitem": "selected",
7124
+ "state": "foreground"
7125
+ },
7126
+ "path": [
7127
+ "color",
7128
+ "dark-mode",
7129
+ "datepicker",
7130
+ "selected",
7131
+ "foreground"
7132
+ ]
7133
+ }
7134
+ }
7135
+ },
6993
7136
  "input": {
6994
7137
  "checkbox": {
6995
7138
  "checked": {
@@ -13327,6 +13470,149 @@
13327
13470
  }
13328
13471
  }
13329
13472
  },
13473
+ "datepicker": {
13474
+ "accent": {
13475
+ "foreground": {
13476
+ "value": "#4f32ce",
13477
+ "public": true,
13478
+ "isReferenceToInternal": true,
13479
+ "filePath": "tokens/color/component/datepicker.light.json",
13480
+ "isSource": true,
13481
+ "original": {
13482
+ "value": "{color.light-mode.brand.primary.400.value}",
13483
+ "public": true,
13484
+ "isReferenceToInternal": true
13485
+ },
13486
+ "name": "color-light-mode-datepicker-accent-foreground",
13487
+ "attributes": {
13488
+ "category": "color",
13489
+ "type": "light-mode",
13490
+ "item": "datepicker",
13491
+ "subitem": "accent",
13492
+ "state": "foreground"
13493
+ },
13494
+ "path": [
13495
+ "color",
13496
+ "light-mode",
13497
+ "datepicker",
13498
+ "accent",
13499
+ "foreground"
13500
+ ]
13501
+ }
13502
+ },
13503
+ "range": {
13504
+ "background": {
13505
+ "value": "#f4f3fc",
13506
+ "public": true,
13507
+ "isReferenceToInternal": true,
13508
+ "filePath": "tokens/color/component/datepicker.light.json",
13509
+ "isSource": true,
13510
+ "original": {
13511
+ "value": "{color.light-mode.brand.primary.100.value}",
13512
+ "public": true,
13513
+ "isReferenceToInternal": true
13514
+ },
13515
+ "name": "color-light-mode-datepicker-range-background",
13516
+ "attributes": {
13517
+ "category": "color",
13518
+ "type": "light-mode",
13519
+ "item": "datepicker",
13520
+ "subitem": "range",
13521
+ "state": "background"
13522
+ },
13523
+ "path": [
13524
+ "color",
13525
+ "light-mode",
13526
+ "datepicker",
13527
+ "range",
13528
+ "background"
13529
+ ]
13530
+ },
13531
+ "foreground": {
13532
+ "value": "#000000",
13533
+ "public": true,
13534
+ "isReferenceToInternal": true,
13535
+ "filePath": "tokens/color/component/datepicker.light.json",
13536
+ "isSource": true,
13537
+ "original": {
13538
+ "value": "{color.light-mode.neutral.600.value}",
13539
+ "public": true,
13540
+ "isReferenceToInternal": true
13541
+ },
13542
+ "name": "color-light-mode-datepicker-range-foreground",
13543
+ "attributes": {
13544
+ "category": "color",
13545
+ "type": "light-mode",
13546
+ "item": "datepicker",
13547
+ "subitem": "range",
13548
+ "state": "foreground"
13549
+ },
13550
+ "path": [
13551
+ "color",
13552
+ "light-mode",
13553
+ "datepicker",
13554
+ "range",
13555
+ "foreground"
13556
+ ]
13557
+ }
13558
+ },
13559
+ "selected": {
13560
+ "background": {
13561
+ "value": "#4f32ce",
13562
+ "public": true,
13563
+ "isReferenceToInternal": true,
13564
+ "filePath": "tokens/color/component/datepicker.light.json",
13565
+ "isSource": true,
13566
+ "original": {
13567
+ "value": "{color.light-mode.brand.primary.400.value}",
13568
+ "public": true,
13569
+ "isReferenceToInternal": true
13570
+ },
13571
+ "name": "color-light-mode-datepicker-selected-background",
13572
+ "attributes": {
13573
+ "category": "color",
13574
+ "type": "light-mode",
13575
+ "item": "datepicker",
13576
+ "subitem": "selected",
13577
+ "state": "background"
13578
+ },
13579
+ "path": [
13580
+ "color",
13581
+ "light-mode",
13582
+ "datepicker",
13583
+ "selected",
13584
+ "background"
13585
+ ]
13586
+ },
13587
+ "foreground": {
13588
+ "value": "#ffffff",
13589
+ "public": true,
13590
+ "isReferenceToInternal": true,
13591
+ "filePath": "tokens/color/component/datepicker.light.json",
13592
+ "isSource": true,
13593
+ "original": {
13594
+ "value": "{color.light-mode.neutral.000.value}",
13595
+ "public": true,
13596
+ "isReferenceToInternal": true
13597
+ },
13598
+ "name": "color-light-mode-datepicker-selected-foreground",
13599
+ "attributes": {
13600
+ "category": "color",
13601
+ "type": "light-mode",
13602
+ "item": "datepicker",
13603
+ "subitem": "selected",
13604
+ "state": "foreground"
13605
+ },
13606
+ "path": [
13607
+ "color",
13608
+ "light-mode",
13609
+ "datepicker",
13610
+ "selected",
13611
+ "foreground"
13612
+ ]
13613
+ }
13614
+ }
13615
+ },
13330
13616
  "input": {
13331
13617
  "checkbox": {
13332
13618
  "checked": {
package/build/json/pds-design-tokens-dark-mode.json CHANGED
@@ -2960,6 +2960,149 @@
2960
2960
  }
2961
2961
  }
2962
2962
  },
2963
+ "datepicker": {
2964
+ "accent": {
2965
+ "foreground": {
2966
+ "value": "#745dd8",
2967
+ "public": true,
2968
+ "isReferenceToInternal": true,
2969
+ "filePath": "tokens/color/component/datepicker.dark.json",
2970
+ "isSource": true,
2971
+ "original": {
2972
+ "value": "{color.dark-mode.brand.primary.400.value}",
2973
+ "public": true,
2974
+ "isReferenceToInternal": true
2975
+ },
2976
+ "name": "color-dark-mode-datepicker-accent-foreground",
2977
+ "attributes": {
2978
+ "category": "color",
2979
+ "type": "dark-mode",
2980
+ "item": "datepicker",
2981
+ "subitem": "accent",
2982
+ "state": "foreground"
2983
+ },
2984
+ "path": [
2985
+ "color",
2986
+ "dark-mode",
2987
+ "datepicker",
2988
+ "accent",
2989
+ "foreground"
2990
+ ]
2991
+ }
2992
+ },
2993
+ "range": {
2994
+ "background": {
2995
+ "value": "#2c205e",
2996
+ "public": true,
2997
+ "isReferenceToInternal": true,
2998
+ "filePath": "tokens/color/component/datepicker.dark.json",
2999
+ "isSource": true,
3000
+ "original": {
3001
+ "value": "{color.dark-mode.brand.primary.600.value}",
3002
+ "public": true,
3003
+ "isReferenceToInternal": true
3004
+ },
3005
+ "name": "color-dark-mode-datepicker-range-background",
3006
+ "attributes": {
3007
+ "category": "color",
3008
+ "type": "dark-mode",
3009
+ "item": "datepicker",
3010
+ "subitem": "range",
3011
+ "state": "background"
3012
+ },
3013
+ "path": [
3014
+ "color",
3015
+ "dark-mode",
3016
+ "datepicker",
3017
+ "range",
3018
+ "background"
3019
+ ]
3020
+ },
3021
+ "foreground": {
3022
+ "value": "#ffffff",
3023
+ "public": true,
3024
+ "isReferenceToInternal": true,
3025
+ "filePath": "tokens/color/component/datepicker.dark.json",
3026
+ "isSource": true,
3027
+ "original": {
3028
+ "value": "{color.dark-mode.neutral.000.value}",
3029
+ "public": true,
3030
+ "isReferenceToInternal": true
3031
+ },
3032
+ "name": "color-dark-mode-datepicker-range-foreground",
3033
+ "attributes": {
3034
+ "category": "color",
3035
+ "type": "dark-mode",
3036
+ "item": "datepicker",
3037
+ "subitem": "range",
3038
+ "state": "foreground"
3039
+ },
3040
+ "path": [
3041
+ "color",
3042
+ "dark-mode",
3043
+ "datepicker",
3044
+ "range",
3045
+ "foreground"
3046
+ ]
3047
+ }
3048
+ },
3049
+ "selected": {
3050
+ "background": {
3051
+ "value": "#745dd8",
3052
+ "public": true,
3053
+ "isReferenceToInternal": true,
3054
+ "filePath": "tokens/color/component/datepicker.dark.json",
3055
+ "isSource": true,
3056
+ "original": {
3057
+ "value": "{color.dark-mode.brand.primary.400.value}",
3058
+ "public": true,
3059
+ "isReferenceToInternal": true
3060
+ },
3061
+ "name": "color-dark-mode-datepicker-selected-background",
3062
+ "attributes": {
3063
+ "category": "color",
3064
+ "type": "dark-mode",
3065
+ "item": "datepicker",
3066
+ "subitem": "selected",
3067
+ "state": "background"
3068
+ },
3069
+ "path": [
3070
+ "color",
3071
+ "dark-mode",
3072
+ "datepicker",
3073
+ "selected",
3074
+ "background"
3075
+ ]
3076
+ },
3077
+ "foreground": {
3078
+ "value": "#ffffff",
3079
+ "public": true,
3080
+ "isReferenceToInternal": true,
3081
+ "filePath": "tokens/color/component/datepicker.dark.json",
3082
+ "isSource": true,
3083
+ "original": {
3084
+ "value": "{color.dark-mode.neutral.000.value}",
3085
+ "public": true,
3086
+ "isReferenceToInternal": true
3087
+ },
3088
+ "name": "color-dark-mode-datepicker-selected-foreground",
3089
+ "attributes": {
3090
+ "category": "color",
3091
+ "type": "dark-mode",
3092
+ "item": "datepicker",
3093
+ "subitem": "selected",
3094
+ "state": "foreground"
3095
+ },
3096
+ "path": [
3097
+ "color",
3098
+ "dark-mode",
3099
+ "datepicker",
3100
+ "selected",
3101
+ "foreground"
3102
+ ]
3103
+ }
3104
+ }
3105
+ },
2963
3106
  "input": {
2964
3107
  "checkbox": {
2965
3108
  "checked": {
package/build/json/pds-design-tokens-light-mode.json CHANGED
@@ -3202,6 +3202,149 @@
3202
3202
  }
3203
3203
  }
3204
3204
  },
3205
+ "datepicker": {
3206
+ "accent": {
3207
+ "foreground": {
3208
+ "value": "#4f32ce",
3209
+ "public": true,
3210
+ "isReferenceToInternal": true,
3211
+ "filePath": "tokens/color/component/datepicker.light.json",
3212
+ "isSource": true,
3213
+ "original": {
3214
+ "value": "{color.light-mode.brand.primary.400.value}",
3215
+ "public": true,
3216
+ "isReferenceToInternal": true
3217
+ },
3218
+ "name": "color-light-mode-datepicker-accent-foreground",
3219
+ "attributes": {
3220
+ "category": "color",
3221
+ "type": "light-mode",
3222
+ "item": "datepicker",
3223
+ "subitem": "accent",
3224
+ "state": "foreground"
3225
+ },
3226
+ "path": [
3227
+ "color",
3228
+ "light-mode",
3229
+ "datepicker",
3230
+ "accent",
3231
+ "foreground"
3232
+ ]
3233
+ }
3234
+ },
3235
+ "range": {
3236
+ "background": {
3237
+ "value": "#f4f3fc",
3238
+ "public": true,
3239
+ "isReferenceToInternal": true,
3240
+ "filePath": "tokens/color/component/datepicker.light.json",
3241
+ "isSource": true,
3242
+ "original": {
3243
+ "value": "{color.light-mode.brand.primary.100.value}",
3244
+ "public": true,
3245
+ "isReferenceToInternal": true
3246
+ },
3247
+ "name": "color-light-mode-datepicker-range-background",
3248
+ "attributes": {
3249
+ "category": "color",
3250
+ "type": "light-mode",
3251
+ "item": "datepicker",
3252
+ "subitem": "range",
3253
+ "state": "background"
3254
+ },
3255
+ "path": [
3256
+ "color",
3257
+ "light-mode",
3258
+ "datepicker",
3259
+ "range",
3260
+ "background"
3261
+ ]
3262
+ },
3263
+ "foreground": {
3264
+ "value": "#000000",
3265
+ "public": true,
3266
+ "isReferenceToInternal": true,
3267
+ "filePath": "tokens/color/component/datepicker.light.json",
3268
+ "isSource": true,
3269
+ "original": {
3270
+ "value": "{color.light-mode.neutral.600.value}",
3271
+ "public": true,
3272
+ "isReferenceToInternal": true
3273
+ },
3274
+ "name": "color-light-mode-datepicker-range-foreground",
3275
+ "attributes": {
3276
+ "category": "color",
3277
+ "type": "light-mode",
3278
+ "item": "datepicker",
3279
+ "subitem": "range",
3280
+ "state": "foreground"
3281
+ },
3282
+ "path": [
3283
+ "color",
3284
+ "light-mode",
3285
+ "datepicker",
3286
+ "range",
3287
+ "foreground"
3288
+ ]
3289
+ }
3290
+ },
3291
+ "selected": {
3292
+ "background": {
3293
+ "value": "#4f32ce",
3294
+ "public": true,
3295
+ "isReferenceToInternal": true,
3296
+ "filePath": "tokens/color/component/datepicker.light.json",
3297
+ "isSource": true,
3298
+ "original": {
3299
+ "value": "{color.light-mode.brand.primary.400.value}",
3300
+ "public": true,
3301
+ "isReferenceToInternal": true
3302
+ },
3303
+ "name": "color-light-mode-datepicker-selected-background",
3304
+ "attributes": {
3305
+ "category": "color",
3306
+ "type": "light-mode",
3307
+ "item": "datepicker",
3308
+ "subitem": "selected",
3309
+ "state": "background"
3310
+ },
3311
+ "path": [
3312
+ "color",
3313
+ "light-mode",
3314
+ "datepicker",
3315
+ "selected",
3316
+ "background"
3317
+ ]
3318
+ },
3319
+ "foreground": {
3320
+ "value": "#ffffff",
3321
+ "public": true,
3322
+ "isReferenceToInternal": true,
3323
+ "filePath": "tokens/color/component/datepicker.light.json",
3324
+ "isSource": true,
3325
+ "original": {
3326
+ "value": "{color.light-mode.neutral.000.value}",
3327
+ "public": true,
3328
+ "isReferenceToInternal": true
3329
+ },
3330
+ "name": "color-light-mode-datepicker-selected-foreground",
3331
+ "attributes": {
3332
+ "category": "color",
3333
+ "type": "light-mode",
3334
+ "item": "datepicker",
3335
+ "subitem": "selected",
3336
+ "state": "foreground"
3337
+ },
3338
+ "path": [
3339
+ "color",
3340
+ "light-mode",
3341
+ "datepicker",
3342
+ "selected",
3343
+ "foreground"
3344
+ ]
3345
+ }
3346
+ }
3347
+ },
3205
3348
  "input": {
3206
3349
  "checkbox": {
3207
3350
  "checked": {
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": "1.0.0",
4
+ "version": "1.1.0",
5
5
  "publishConfig": {
6
6
  "access": "public",
7
7
  "registry": "https://registry.npmjs.org/",