graphwise-styleguide 0.0.1-init6 → 0.0.1-init8

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 (3) hide show
  1. package/dist/variables-dark.css +78 -50
  2. package/dist/variables-light.css +78 -50
  3. package/package.json +3 -1
package/dist/variables-dark.css CHANGED
@@ -9,6 +9,7 @@
9
9
  --gw-space-3: 3rem;
10
10
  --gw-space-4: 4rem;
11
11
  --gw-space-0-25: 0.25rem;
12
+ --gw-space-0-125: 0.125rem; /** 16px base -> 2px */
12
13
  --gw-space-0-375: 0.375rem;
13
14
  --gw-space-0-5: 0.5rem;
14
15
  --gw-space-0-75: 0.75rem;
@@ -62,8 +63,8 @@
62
63
  --gw-main-gray-900: #0a0a0a;
63
64
  --gw-main-gray-50-50: #fafafa;
64
65
  --gw-main-gray-900-50: #0a0a0a;
65
- --gw-main-gray-900-0-1: rgba(10, 10, 10, 0.1);
66
- --gw-main-gray-0-0-1: rgba(255, 255, 255, 0.1);
66
+ --gw-main-gray-900-0-05: rgba(10, 10, 10, 0.05);
67
+ --gw-main-gray-0-0-05: rgba(255, 255, 255, 0.05);
67
68
  --gw-additional-red-100: #fcf3f3;
68
69
  --gw-additional-red-200: #f9e7e7;
69
70
  --gw-additional-red-300: #f4d2d2;
@@ -109,12 +110,17 @@
109
110
  --gw-xl-font-size: 1.5rem;
110
111
  --gw-size-0: 0;
111
112
  --gw-size-1: 1rem;
113
+ --gw-size-0-25: 0.25rem;
114
+ --gw-size-0-5: 0.5rem;
115
+ --gw-size-0-75: 0.75rem;
116
+ --gw-size-0-875: 0.875rem;
117
+ --gw-size-1-125: 1.125rem;
112
118
  --gw-neutral-transparent: rgba(0, 0, 0, 0);
113
119
  --gw-icon-size: 1rem;
114
120
  --gw-disabled-opacity: 0.6;
115
121
  --gw-form-field-sm-font-size: 0.875rem;
116
- --gw-form-field-sm-padding-x: 0.25rem;
117
- --gw-form-field-sm-padding-y: 0.375rem;
122
+ --gw-form-field-sm-padding-x: 0.375rem;
123
+ --gw-form-field-sm-padding-y: 0.25rem;
118
124
  --gw-form-field-lg-font-size: 1.125rem;
119
125
  --gw-form-field-lg-padding-x: 0.875rem;
120
126
  --gw-form-field-lg-padding-y: 0.625rem;
@@ -153,6 +159,7 @@
153
159
  --gw-button-badge-size: 1rem;
154
160
  --gw-button-success-hover-color: #ffffff;
155
161
  --gw-button-success-disabled-color: #ffffff;
162
+ --gw-xxs-line-height: 1.125rem;
156
163
  --gw-1rem-line-height: 1rem;
157
164
  --gw-mask-background: rgba(0, 0, 0, 0.4);
158
165
  --gw-inputtext-sm-font-size: 0.875rem;
@@ -165,23 +172,19 @@
165
172
  --gw-panel-title-font-weight: 600;
166
173
  --gw-panel-content-padding: 0 1.125rem 1.125rem 1.125rem;
167
174
  --gw-panel-footer-padding: 0 1.125rem 1.125rem 1.125rem;
168
- --gw-toggleswitch-width: 2.5rem;
169
- --gw-toggleswitch-height: 1.5rem;
175
+ --gw-toggleswitch-width: 1.875rem;
170
176
  --gw-toggleswitch-border-radius: 30px;
171
177
  --gw-toggleswitch-border-width: 1px;
172
178
  --gw-toggleswitch-border-color: rgba(0, 0, 0, 0);
173
- --gw-toggleswitch-gap: 0.25rem;
174
179
  --gw-toggleswitch-hover-border-color: rgba(0, 0, 0, 0);
175
180
  --gw-toggleswitch-checked-border-color: rgba(0, 0, 0, 0);
176
181
  --gw-toggleswitch-checked-hover-border-color: rgba(0, 0, 0, 0);
177
- --gw-toggleswitch-handle-size: 1rem;
178
182
  --gw-toggleswitch-slide-duration: 0.2s;
179
183
  --gw-floatlabel-active-font-size: 0.75rem;
180
184
  --gw-floatlabel-active-font-weight: 400;
181
185
  --gw-floatlabel-transition-duration: 0.2s;
182
186
  --gw-floatlabel-font-weight: 500;
183
187
  --gw-floatlabel-over-active-top: -1.25rem;
184
- --gw-floatlabel-in-input-padding-top: 2.5rem;
185
188
  --gw-floatlabel-on-active-padding: 0 0.125rem;
186
189
  --gw-radiobutton-width: 1.25rem;
187
190
  --gw-radiobutton-height: 1.25rem;
@@ -259,7 +262,6 @@
259
262
  --gw-badge-xl-height: 2rem;
260
263
  --gw-chip-border-radius: 16px;
261
264
  --gw-chip-padding-x: 0.75rem;
262
- --gw-chip-padding-y: 0.5rem;
263
265
  --gw-chip-gap: 0.5rem;
264
266
  --gw-chip-image-width: 2rem;
265
267
  --gw-chip-image-height: 2rem;
@@ -375,7 +377,6 @@
375
377
  --gw-tabs-tablist-border-width: 1px;
376
378
  --gw-tabs-tablist-gap: 1px;
377
379
  --gw-tabs-tab-border-width: 1px;
378
- --gw-tabs-tab-hover-background: rgba(0, 0, 0, 0);
379
380
  --gw-tabs-tab-font-weight: 600;
380
381
  --gw-tabs-tab-margin: 0;
381
382
  --gw-tabs-tab-gap: 0.5rem;
@@ -629,11 +630,11 @@
629
630
  --gw-form-field-focus-ring-shadow-type: dropShadow;
630
631
  --gw-form-field-focus-ring-shadow-offset-x: 0;
631
632
  --gw-form-field-focus-ring-shadow-offset-y: 0;
632
- --gw-form-field-shadow-blur: 10px;
633
+ --gw-form-field-shadow-blur: 2px;
633
634
  --gw-form-field-shadow-spread: 0;
634
635
  --gw-form-field-shadow-type: dropShadow;
635
636
  --gw-form-field-shadow-offset-x: 0;
636
- --gw-form-field-shadow-offset-y: 10px;
637
+ --gw-form-field-shadow-offset-y: 1px;
637
638
  --gw-focus-ring-shadow-blur: 0;
638
639
  --gw-focus-ring-shadow-spread: 0;
639
640
  --gw-focus-ring-shadow-type: dropShadow;
@@ -769,16 +770,16 @@
769
770
  --gw-inputtext-focus-ring-shadow-type: dropShadow;
770
771
  --gw-inputtext-focus-ring-shadow-offset-x: 0;
771
772
  --gw-inputtext-focus-ring-shadow-offset-y: 0;
772
- --gw-inputtext-shadow-blur: 10px;
773
+ --gw-inputtext-shadow-blur: 2px;
773
774
  --gw-inputtext-shadow-spread: 0;
774
775
  --gw-inputtext-shadow-type: dropShadow;
775
776
  --gw-inputtext-shadow-offset-x: 0;
776
- --gw-inputtext-shadow-offset-y: 10px;
777
- --gw-toggleswitch-shadow-blur: 10px;
777
+ --gw-inputtext-shadow-offset-y: 1px;
778
+ --gw-toggleswitch-shadow-blur: 2px;
778
779
  --gw-toggleswitch-shadow-spread: 0;
779
780
  --gw-toggleswitch-shadow-type: dropShadow;
780
781
  --gw-toggleswitch-shadow-offset-x: 0;
781
- --gw-toggleswitch-shadow-offset-y: 10px;
782
+ --gw-toggleswitch-shadow-offset-y: 1px;
782
783
  --gw-toggleswitch-focus-ring-shadow-blur: 0;
783
784
  --gw-toggleswitch-focus-ring-shadow-spread: 0;
784
785
  --gw-toggleswitch-focus-ring-shadow-type: dropShadow;
@@ -789,31 +790,31 @@
789
790
  --gw-radiobutton-focus-ring-shadow-type: dropShadow;
790
791
  --gw-radiobutton-focus-ring-shadow-offset-x: 0;
791
792
  --gw-radiobutton-focus-ring-shadow-offset-y: 0;
792
- --gw-radiobutton-shadow-blur: 10px;
793
+ --gw-radiobutton-shadow-blur: 2px;
793
794
  --gw-radiobutton-shadow-spread: 0;
794
795
  --gw-radiobutton-shadow-type: dropShadow;
795
796
  --gw-radiobutton-shadow-offset-x: 0;
796
- --gw-radiobutton-shadow-offset-y: 10px;
797
+ --gw-radiobutton-shadow-offset-y: 1px;
797
798
  --gw-checkbox-focus-ring-shadow-blur: 0;
798
799
  --gw-checkbox-focus-ring-shadow-spread: 0;
799
800
  --gw-checkbox-focus-ring-shadow-type: dropShadow;
800
801
  --gw-checkbox-focus-ring-shadow-offset-x: 0;
801
802
  --gw-checkbox-focus-ring-shadow-offset-y: 0;
802
- --gw-checkbox-shadow-blur: 10px;
803
+ --gw-checkbox-shadow-blur: 2px;
803
804
  --gw-checkbox-shadow-spread: 0;
804
805
  --gw-checkbox-shadow-type: dropShadow;
805
806
  --gw-checkbox-shadow-offset-x: 0;
806
- --gw-checkbox-shadow-offset-y: 10px;
807
+ --gw-checkbox-shadow-offset-y: 1px;
807
808
  --gw-autocomplete-focus-ring-shadow-blur: 0;
808
809
  --gw-autocomplete-focus-ring-shadow-spread: 0;
809
810
  --gw-autocomplete-focus-ring-shadow-type: dropShadow;
810
811
  --gw-autocomplete-focus-ring-shadow-offset-x: 0;
811
812
  --gw-autocomplete-focus-ring-shadow-offset-y: 0;
812
- --gw-autocomplete-shadow-blur: 10px;
813
+ --gw-autocomplete-shadow-blur: 2px;
813
814
  --gw-autocomplete-shadow-spread: 0;
814
815
  --gw-autocomplete-shadow-type: dropShadow;
815
816
  --gw-autocomplete-shadow-offset-x: 0;
816
- --gw-autocomplete-shadow-offset-y: 10px;
817
+ --gw-autocomplete-shadow-offset-y: 1px;
817
818
  --gw-autocomplete-overlay-shadow-1-blur: 6px;
818
819
  --gw-autocomplete-overlay-shadow-1-spread: -1px;
819
820
  --gw-autocomplete-overlay-shadow-1-color: rgba(255, 255, 255, 0.1);
@@ -964,11 +965,11 @@
964
965
  --gw-cascadeselect-focus-ring-shadow-type: dropShadow;
965
966
  --gw-cascadeselect-focus-ring-shadow-offset-x: 0;
966
967
  --gw-cascadeselect-focus-ring-shadow-offset-y: 0;
967
- --gw-cascadeselect-shadow-blur: 10px;
968
+ --gw-cascadeselect-shadow-blur: 2px;
968
969
  --gw-cascadeselect-shadow-spread: 0;
969
970
  --gw-cascadeselect-shadow-type: dropShadow;
970
971
  --gw-cascadeselect-shadow-offset-x: 0;
971
- --gw-cascadeselect-shadow-offset-y: 10px;
972
+ --gw-cascadeselect-shadow-offset-y: 1px;
972
973
  --gw-cascadeselect-overlay-shadow-1-blur: 6px;
973
974
  --gw-cascadeselect-overlay-shadow-1-spread: -1px;
974
975
  --gw-cascadeselect-overlay-shadow-1-color: rgba(255, 255, 255, 0.1);
@@ -1000,11 +1001,11 @@
1000
1001
  --gw-select-focus-ring-shadow-type: dropShadow;
1001
1002
  --gw-select-focus-ring-shadow-offset-x: 0;
1002
1003
  --gw-select-focus-ring-shadow-offset-y: 0;
1003
- --gw-select-shadow-blur: 10px;
1004
+ --gw-select-shadow-blur: 2px;
1004
1005
  --gw-select-shadow-spread: 0;
1005
1006
  --gw-select-shadow-type: dropShadow;
1006
1007
  --gw-select-shadow-offset-x: 0;
1007
- --gw-select-shadow-offset-y: 10px;
1008
+ --gw-select-shadow-offset-y: 1px;
1008
1009
  --gw-select-overlay-shadow-1-blur: 6px;
1009
1010
  --gw-select-overlay-shadow-1-spread: -1px;
1010
1011
  --gw-select-overlay-shadow-1-color: rgba(255, 255, 255, 0.1);
@@ -1032,31 +1033,31 @@
1032
1033
  --gw-textarea-focus-ring-shadow-type: dropShadow;
1033
1034
  --gw-textarea-focus-ring-shadow-offset-x: 0;
1034
1035
  --gw-textarea-focus-ring-shadow-offset-y: 0;
1035
- --gw-textarea-shadow-blur: 10px;
1036
+ --gw-textarea-shadow-blur: 2px;
1036
1037
  --gw-textarea-shadow-spread: 0;
1037
1038
  --gw-textarea-shadow-type: dropShadow;
1038
1039
  --gw-textarea-shadow-offset-x: 0;
1039
- --gw-textarea-shadow-offset-y: 10px;
1040
+ --gw-textarea-shadow-offset-y: 1px;
1040
1041
  --gw-knob-focus-ring-shadow-blur: 0;
1041
1042
  --gw-knob-focus-ring-shadow-spread: 0;
1042
1043
  --gw-knob-focus-ring-shadow-type: dropShadow;
1043
1044
  --gw-knob-focus-ring-shadow-offset-x: 0;
1044
1045
  --gw-knob-focus-ring-shadow-offset-y: 0;
1045
- --gw-listbox-shadow-blur: 10px;
1046
+ --gw-listbox-shadow-blur: 2px;
1046
1047
  --gw-listbox-shadow-spread: 0;
1047
1048
  --gw-listbox-shadow-type: dropShadow;
1048
1049
  --gw-listbox-shadow-offset-x: 0;
1049
- --gw-listbox-shadow-offset-y: 10px;
1050
+ --gw-listbox-shadow-offset-y: 1px;
1050
1051
  --gw-multiselect-focus-ring-shadow-blur: 0;
1051
1052
  --gw-multiselect-focus-ring-shadow-spread: 0;
1052
1053
  --gw-multiselect-focus-ring-shadow-type: dropShadow;
1053
1054
  --gw-multiselect-focus-ring-shadow-offset-x: 0;
1054
1055
  --gw-multiselect-focus-ring-shadow-offset-y: 0;
1055
- --gw-multiselect-shadow-blur: 10px;
1056
+ --gw-multiselect-shadow-blur: 2px;
1056
1057
  --gw-multiselect-shadow-spread: 0;
1057
1058
  --gw-multiselect-shadow-type: dropShadow;
1058
1059
  --gw-multiselect-shadow-offset-x: 0;
1059
- --gw-multiselect-shadow-offset-y: 10px;
1060
+ --gw-multiselect-shadow-offset-y: 1px;
1060
1061
  --gw-multiselect-overlay-shadow-1-blur: 6px;
1061
1062
  --gw-multiselect-overlay-shadow-1-spread: -1px;
1062
1063
  --gw-multiselect-overlay-shadow-1-color: rgba(255, 255, 255, 0.1);
@@ -1117,11 +1118,11 @@
1117
1118
  --gw-treeselect-focus-ring-shadow-type: dropShadow;
1118
1119
  --gw-treeselect-focus-ring-shadow-offset-x: 0;
1119
1120
  --gw-treeselect-focus-ring-shadow-offset-y: 0;
1120
- --gw-treeselect-shadow-blur: 10px;
1121
+ --gw-treeselect-shadow-blur: 2px;
1121
1122
  --gw-treeselect-shadow-spread: 0;
1122
1123
  --gw-treeselect-shadow-type: dropShadow;
1123
1124
  --gw-treeselect-shadow-offset-x: 0;
1124
- --gw-treeselect-shadow-offset-y: 10px;
1125
+ --gw-treeselect-shadow-offset-y: 1px;
1125
1126
  --gw-treeselect-overlay-shadow-1-blur: 6px;
1126
1127
  --gw-treeselect-overlay-shadow-1-spread: -1px;
1127
1128
  --gw-treeselect-overlay-shadow-1-color: rgba(255, 255, 255, 0.1);
@@ -1595,7 +1596,7 @@
1595
1596
  --gw-neutral-700: var(--gw-main-gray-200);
1596
1597
  --gw-neutral-800: var(--gw-main-gray-100);
1597
1598
  --gw-neutral-900: var(--gw-main-gray-0);
1598
- --gw-neutral-shadow: var(--gw-main-gray-0-0-1);
1599
+ --gw-neutral-shadow: var(--gw-main-gray-0-0-05);
1599
1600
  --gw-tertiary-100: var(--gw-main-teal-900);
1600
1601
  --gw-tertiary-200: var(--gw-main-teal-800);
1601
1602
  --gw-tertiary-300: var(--gw-main-teal-700);
@@ -1628,7 +1629,7 @@
1628
1629
  --gw-button-icon-size: var(--gw-icon-size);
1629
1630
  --gw-button-label-font-weight: var(--gw-font-weight-400);
1630
1631
  --gw-button-label-font-size: var(--gw-base-font-size);
1631
- --gw-button-label-line-height: var(--gw-1rem-line-height);
1632
+ --gw-button-label-line-height: var(--gw-xxs-line-height);
1632
1633
  --gw-button-label-font-family: var(--gw-font-family-body);
1633
1634
  --gw-button-focus-ring-width: var(--gw-focus-ring-width);
1634
1635
  --gw-button-focus-ring-offset: var(--gw-focus-ring-offset);
@@ -1642,9 +1643,12 @@
1642
1643
  --gw-inputtext-sm-padding-y: var(--gw-form-field-sm-padding-y);
1643
1644
  --gw-inputtext-lg-padding-x: var(--gw-form-field-lg-padding-x);
1644
1645
  --gw-inputtext-lg-padding-y: var(--gw-form-field-lg-padding-y);
1645
- --gw-toggleswitch-handle-border-radius: var(--gw-toggleswitch-handle-size)/2;
1646
+ --gw-toggleswitch-height: var(--gw-size-1);
1647
+ --gw-toggleswitch-gap: var(--gw-space-0-125);
1648
+ --gw-toggleswitch-handle-size: var(--gw-size-0-75);
1646
1649
  --gw-toggleswitch-focus-ring-width: var(--gw-focus-ring-width);
1647
1650
  --gw-toggleswitch-focus-ring-offset: var(--gw-focus-ring-offset);
1651
+ --gw-floatlabel-in-input-padding-top: var(--gw-space-1-125);
1648
1652
  --gw-floatlabel-on-border-radius: var(--gw-border-radius-xs);
1649
1653
  --gw-radiobutton-focus-ring-width: var(--gw-focus-ring-width);
1650
1654
  --gw-radiobutton-focus-ring-offset: var(--gw-focus-ring-offset);
@@ -1675,6 +1679,7 @@
1675
1679
  --gw-rating-focus-ring-offset: var(--gw-focus-ring-offset);
1676
1680
  --gw-rating-transition-duration: var(--gw-transition-duration);
1677
1681
  --gw-badge-border-radius: var(--gw-border-radius-md);
1682
+ --gw-chip-padding-y: var(--gw-space-0-125);
1678
1683
  --gw-chip-remove-icon-focus-ring-width: var(--gw-focus-ring-width);
1679
1684
  --gw-chip-remove-icon-focus-ring-offset: var(--gw-focus-ring-offset);
1680
1685
  --gw-chip-transition-duration: var(--gw-transition-duration);
@@ -1978,6 +1983,22 @@
1978
1983
  --gw-body-lg-bold-font-weight: var(--gw-font-weight-700);
1979
1984
  --gw-body-lg-bold-line-height: var(--gw-lg-line-height);
1980
1985
  --gw-body-lg-bold-font-size: var(--gw-lg-font-size);
1986
+ --gw-body-xs-light-font-family: var(--gw-font-family-body);
1987
+ --gw-body-xs-light-font-weight: var(--gw-font-weight-300);
1988
+ --gw-body-xs-light-line-height: var(--gw-xs-line-height);
1989
+ --gw-body-xs-light-font-size: var(--gw-xs-font-size);
1990
+ --gw-body-xs-regular-font-family: var(--gw-font-family-body);
1991
+ --gw-body-xs-regular-font-weight: var(--gw-font-weight-400);
1992
+ --gw-body-xs-regular-line-height: var(--gw-xs-line-height);
1993
+ --gw-body-xs-regular-font-size: var(--gw-xs-font-size);
1994
+ --gw-body-xs-medium-font-family: var(--gw-font-family-body);
1995
+ --gw-body-xs-medium-font-weight: var(--gw-font-weight-500);
1996
+ --gw-body-xs-medium-line-height: var(--gw-xs-line-height);
1997
+ --gw-body-xs-medium-font-size: var(--gw-xs-font-size);
1998
+ --gw-body-xs-bold-font-family: var(--gw-font-family-body);
1999
+ --gw-body-xs-bold-font-weight: var(--gw-font-weight-700);
2000
+ --gw-body-xs-bold-line-height: var(--gw-xs-line-height);
2001
+ --gw-body-xs-bold-font-size: var(--gw-xs-font-size);
1981
2002
  --gw-caption-base-font-family: var(--gw-font-family-body);
1982
2003
  --gw-caption-base-font-weight: var(--gw-font-weight-600);
1983
2004
  --gw-caption-base-line-height: var(--gw-1rem-line-height);
@@ -1988,15 +2009,15 @@
1988
2009
  --gw-caption-sm-font-size: var(--gw-xs-font-size);
1989
2010
  --gw-label-base-regular-font-family: var(--gw-font-family-body);
1990
2011
  --gw-label-base-regular-font-weight: var(--gw-font-weight-400);
1991
- --gw-label-base-regular-line-height: var(--gw-1rem-line-height);
2012
+ --gw-label-base-regular-line-height: var(--gw-xxs-line-height);
1992
2013
  --gw-label-base-regular-font-size: var(--gw-base-font-size);
1993
2014
  --gw-label-base-medium-font-family: var(--gw-font-family-body);
1994
2015
  --gw-label-base-medium-font-weight: var(--gw-font-weight-500);
1995
- --gw-label-base-medium-line-height: var(--gw-1rem-line-height);
2016
+ --gw-label-base-medium-line-height: var(--gw-xxs-line-height);
1996
2017
  --gw-label-base-medium-font-size: var(--gw-base-font-size);
1997
2018
  --gw-label-base-bold-font-family: var(--gw-font-family-body);
1998
2019
  --gw-label-base-bold-font-weight: var(--gw-font-weight-700);
1999
- --gw-label-base-bold-line-height: var(--gw-1rem-line-height);
2020
+ --gw-label-base-bold-line-height: var(--gw-xxs-line-height);
2000
2021
  --gw-label-base-bold-font-size: var(--gw-base-font-size);
2001
2022
  --gw-label-sm-regular-font-family: var(--gw-font-family-body);
2002
2023
  --gw-label-sm-regular-font-weight: var(--gw-font-weight-400);
@@ -2026,7 +2047,7 @@
2026
2047
  --gw-card-shadow-2-color: var(--gw-main-gray-900-50);
2027
2048
  --gw-tabs-tab-label-font-family: var(--gw-font-family-body);
2028
2049
  --gw-tabs-tab-label-font-weight: var(--gw-font-weight-400);
2029
- --gw-tabs-tab-label-line-height: var(--gw-1rem-line-height);
2050
+ --gw-tabs-tab-label-line-height: var(--gw-xxs-line-height);
2030
2051
  --gw-tabs-tab-label-font-size: var(--gw-base-font-size);
2031
2052
  --gw-fileupload-header-stroke-color: var(--gw-fileupload-header-border-color);
2032
2053
  --gw-fileupload-header-stroke-width: var(--gw-fileupload-header-border-width);
@@ -2063,6 +2084,8 @@
2063
2084
  --gw-tertiary-text: var(--gw-tertiary-dark);
2064
2085
  --gw-tertiary-hover-color: var(--gw-tertiary-dark);
2065
2086
  --gw-tertiary-active-color: var(--gw-tertiary-light);
2087
+ --gw-disabled-background: var(--gw-neutral-200);
2088
+ --gw-disabled-color: var(--gw-neutral-600);
2066
2089
  --gw-form-field-border-radius: var(--gw-defaul-border-radius);
2067
2090
  --gw-form-field-disabled-color: var(--gw-neutral-600);
2068
2091
  --gw-form-field-filled-background: var(--gw-neutral-100);
@@ -2127,7 +2150,7 @@
2127
2150
  --gw-button-text-contrast-active-background: var(--gw-neutral-100);
2128
2151
  --gw-body-background: var(--gw-neutral-0);
2129
2152
  --gw-muted-background: var(--gw-neutral-200);
2130
- --gw-muted-color: var(--gw-neutral-600);
2153
+ --gw-muted-color: var(--gw-neutral-700);
2131
2154
  --gw-error-base: var(--gw-danger-700);
2132
2155
  --gw-error-lighter: var(--gw-danger-200);
2133
2156
  --gw-error-light: var(--gw-danger-600);
@@ -2139,8 +2162,8 @@
2139
2162
  --gw-mask-color: var(--gw-neutral-200);
2140
2163
  --gw-hover-color: var(--gw-neutral-800);
2141
2164
  --gw-hover-background: var(--gw-neutral-200);
2142
- --gw-hover-border-color: var(--gw-neutral-300);
2143
- --gw-default-border-color: var(--gw-neutral-200);
2165
+ --gw-hover-border-color: var(--gw-neutral-400);
2166
+ --gw-default-border-color: var(--gw-neutral-300);
2144
2167
  --gw-default-background: var(--gw-neutral-0);
2145
2168
  --gw-inputtext-border-radius: var(--gw-defaul-border-radius);
2146
2169
  --gw-inputtext-focus-ring-style: var(--gw-form-field-focus-ring-style);
@@ -2149,6 +2172,7 @@
2149
2172
  --gw-inputtext-padding-y: var(--gw-form-field-padding-y);
2150
2173
  --gw-inputtext-transition-duration: var(--gw-form-field-transition-duration);
2151
2174
  --gw-toggleswitch-hover-background: var(--gw-neutral-400);
2175
+ --gw-toggleswitch-handle-border-radius: var(--gw-toggleswitch-handle-size)/2;
2152
2176
  --gw-toggleswitch-handle-background: var(--gw-neutral-0);
2153
2177
  --gw-toggleswitch-handle-hover-background: var(--gw-neutral-0);
2154
2178
  --gw-toggleswitch-handle-checked-background: var(--gw-neutral-0);
@@ -2271,6 +2295,8 @@
2271
2295
  --gw-splitter-handle-focus-ring-style: var(--gw-focus-ring-style);
2272
2296
  --gw-scrollpanel-bar-focus-ring-style: var(--gw-focus-ring-style);
2273
2297
  --gw-scrollpanel-bar-background: var(--gw-neutral-100);
2298
+ --gw-tabs-tab-hover-background: var(--gw-neutral-200);
2299
+ --gw-tabs-tab-hover-border-color: var(--gw-neutral-200);
2274
2300
  --gw-tabs-tab-focus-ring-style: var(--gw-focus-ring-style);
2275
2301
  --gw-tabs-tabpanel-focus-ring-style: var(--gw-focus-ring-style);
2276
2302
  --gw-tabs-nav-button-focus-ring-style: var(--gw-focus-ring-style);
@@ -2896,11 +2922,13 @@
2896
2922
  --gw-splitter-handle-border-radius: var(--gw-content-border-radius);
2897
2923
  --gw-tabs-tablist-background: var(--gw-default-background);
2898
2924
  --gw-tabs-tablist-border-color: var(--gw-default-border-color);
2899
- --gw-tabs-tab-border-color: var(--gw-default-border-color);
2900
- --gw-tabs-tab-active-border-color: var(--gw-default-background);
2925
+ --gw-tabs-tab-border-color: var(--gw-neutral-lighter);
2926
+ --gw-tabs-tab-border-bottom-color: var(--gw-default-border-color);
2927
+ --gw-tabs-tab-active-border-bottom-color: var(--gw-default-background);
2928
+ --gw-tabs-tab-active-border-color: var(--gw-default-border-color);
2901
2929
  --gw-tabs-tab-active-background: var(--gw-default-background);
2902
2930
  --gw-tabs-tab-color: var(--gw-neutral-dark);
2903
- --gw-tabs-tab-hover-border-color: var(--gw-default-border-color);
2931
+ --gw-tabs-tab-hover-border-bottom-color: var(--gw-default-border-color);
2904
2932
  --gw-tabs-tab-background: var(--gw-neutral-lighter);
2905
2933
  --gw-tabs-tabpanel-background: var(--gw-default-background);
2906
2934
  --gw-tabs-nav-button-background: var(--gw-default-background);
@@ -3118,10 +3146,10 @@
3118
3146
  --gw-border-default-color: var(--gw-default-border-color);
3119
3147
  --gw-warning-text: var(--gw-help-dark);
3120
3148
  --gw-form-field-float-label-invalid-color: var(--gw-form-field-invalid-placeholder-color);
3121
- --gw-list-option-group-color: var(--gw-text-muted-color);
3149
+ --gw-list-option-group-color: var(--gw-inputtext-disabled-color);
3122
3150
  --gw-list-option-selected-focus-background: var(--gw-highlight-focus-background);
3123
3151
  --gw-list-option-selected-focus-color: var(--gw-highlight-focus-color);
3124
- --gw-list-option-selected-color: var(--gw-highlight-color);
3152
+ --gw-list-option-selected-color: var(--gw-text-color);
3125
3153
  --gw-list-option-color: var(--gw-text-color);
3126
3154
  --gw-navigation-item-color: var(--gw-text-color);
3127
3155
  --gw-navigation-submenuitem-active-color: var(--gw-primary-contrast-color);
package/dist/variables-light.css CHANGED
@@ -9,6 +9,7 @@
9
9
  --gw-space-3: 3rem;
10
10
  --gw-space-4: 4rem;
11
11
  --gw-space-0-25: 0.25rem;
12
+ --gw-space-0-125: 0.125rem; /** 16px base -> 2px */
12
13
  --gw-space-0-375: 0.375rem;
13
14
  --gw-space-0-5: 0.5rem;
14
15
  --gw-space-0-75: 0.75rem;
@@ -62,8 +63,8 @@
62
63
  --gw-main-gray-900: #0a0a0a;
63
64
  --gw-main-gray-50-50: #fafafa;
64
65
  --gw-main-gray-900-50: #0a0a0a;
65
- --gw-main-gray-900-0-1: rgba(10, 10, 10, 0.1);
66
- --gw-main-gray-0-0-1: rgba(255, 255, 255, 0.1);
66
+ --gw-main-gray-900-0-05: rgba(10, 10, 10, 0.05);
67
+ --gw-main-gray-0-0-05: rgba(255, 255, 255, 0.05);
67
68
  --gw-additional-red-100: #fcf3f3;
68
69
  --gw-additional-red-200: #f9e7e7;
69
70
  --gw-additional-red-300: #f4d2d2;
@@ -109,12 +110,17 @@
109
110
  --gw-xl-font-size: 1.5rem;
110
111
  --gw-size-0: 0;
111
112
  --gw-size-1: 1rem;
113
+ --gw-size-0-25: 0.25rem;
114
+ --gw-size-0-5: 0.5rem;
115
+ --gw-size-0-75: 0.75rem;
116
+ --gw-size-0-875: 0.875rem;
117
+ --gw-size-1-125: 1.125rem;
112
118
  --gw-neutral-transparent: rgba(0, 0, 0, 0);
113
119
  --gw-icon-size: 1rem;
114
120
  --gw-disabled-opacity: 0.6;
115
121
  --gw-form-field-sm-font-size: 0.875rem;
116
- --gw-form-field-sm-padding-x: 0.25rem;
117
- --gw-form-field-sm-padding-y: 0.375rem;
122
+ --gw-form-field-sm-padding-x: 0.375rem;
123
+ --gw-form-field-sm-padding-y: 0.25rem;
118
124
  --gw-form-field-lg-font-size: 1.125rem;
119
125
  --gw-form-field-lg-padding-x: 0.875rem;
120
126
  --gw-form-field-lg-padding-y: 0.625rem;
@@ -153,6 +159,7 @@
153
159
  --gw-button-badge-size: 1rem;
154
160
  --gw-button-success-hover-color: #ffffff;
155
161
  --gw-button-success-disabled-color: #ffffff;
162
+ --gw-xxs-line-height: 1.125rem;
156
163
  --gw-1rem-line-height: 1rem;
157
164
  --gw-mask-background: rgba(0, 0, 0, 0.4);
158
165
  --gw-inputtext-sm-font-size: 0.875rem;
@@ -165,23 +172,19 @@
165
172
  --gw-panel-title-font-weight: 600;
166
173
  --gw-panel-content-padding: 0 1.125rem 1.125rem 1.125rem;
167
174
  --gw-panel-footer-padding: 0 1.125rem 1.125rem 1.125rem;
168
- --gw-toggleswitch-width: 2.5rem;
169
- --gw-toggleswitch-height: 1.5rem;
175
+ --gw-toggleswitch-width: 1.875rem;
170
176
  --gw-toggleswitch-border-radius: 30px;
171
177
  --gw-toggleswitch-border-width: 1px;
172
178
  --gw-toggleswitch-border-color: rgba(0, 0, 0, 0);
173
- --gw-toggleswitch-gap: 0.25rem;
174
179
  --gw-toggleswitch-hover-border-color: rgba(0, 0, 0, 0);
175
180
  --gw-toggleswitch-checked-border-color: rgba(0, 0, 0, 0);
176
181
  --gw-toggleswitch-checked-hover-border-color: rgba(0, 0, 0, 0);
177
- --gw-toggleswitch-handle-size: 1rem;
178
182
  --gw-toggleswitch-slide-duration: 0.2s;
179
183
  --gw-floatlabel-active-font-size: 0.75rem;
180
184
  --gw-floatlabel-active-font-weight: 400;
181
185
  --gw-floatlabel-transition-duration: 0.2s;
182
186
  --gw-floatlabel-font-weight: 500;
183
187
  --gw-floatlabel-over-active-top: -1.25rem;
184
- --gw-floatlabel-in-input-padding-top: 2.5rem;
185
188
  --gw-floatlabel-on-active-padding: 0 0.125rem;
186
189
  --gw-radiobutton-width: 1.25rem;
187
190
  --gw-radiobutton-height: 1.25rem;
@@ -259,7 +262,6 @@
259
262
  --gw-badge-xl-height: 2rem;
260
263
  --gw-chip-border-radius: 16px;
261
264
  --gw-chip-padding-x: 0.75rem;
262
- --gw-chip-padding-y: 0.5rem;
263
265
  --gw-chip-gap: 0.5rem;
264
266
  --gw-chip-image-width: 2rem;
265
267
  --gw-chip-image-height: 2rem;
@@ -375,7 +377,6 @@
375
377
  --gw-tabs-tablist-border-width: 1px;
376
378
  --gw-tabs-tablist-gap: 1px;
377
379
  --gw-tabs-tab-border-width: 1px;
378
- --gw-tabs-tab-hover-background: rgba(0, 0, 0, 0);
379
380
  --gw-tabs-tab-font-weight: 600;
380
381
  --gw-tabs-tab-margin: 0;
381
382
  --gw-tabs-tab-gap: 0.5rem;
@@ -629,11 +630,11 @@
629
630
  --gw-form-field-focus-ring-shadow-type: dropShadow;
630
631
  --gw-form-field-focus-ring-shadow-offset-x: 0;
631
632
  --gw-form-field-focus-ring-shadow-offset-y: 0;
632
- --gw-form-field-shadow-blur: 10px;
633
+ --gw-form-field-shadow-blur: 2px;
633
634
  --gw-form-field-shadow-spread: 0;
634
635
  --gw-form-field-shadow-type: dropShadow;
635
636
  --gw-form-field-shadow-offset-x: 0;
636
- --gw-form-field-shadow-offset-y: 10px;
637
+ --gw-form-field-shadow-offset-y: 1px;
637
638
  --gw-focus-ring-shadow-blur: 0;
638
639
  --gw-focus-ring-shadow-spread: 0;
639
640
  --gw-focus-ring-shadow-type: dropShadow;
@@ -769,16 +770,16 @@
769
770
  --gw-inputtext-focus-ring-shadow-type: dropShadow;
770
771
  --gw-inputtext-focus-ring-shadow-offset-x: 0;
771
772
  --gw-inputtext-focus-ring-shadow-offset-y: 0;
772
- --gw-inputtext-shadow-blur: 10px;
773
+ --gw-inputtext-shadow-blur: 2px;
773
774
  --gw-inputtext-shadow-spread: 0;
774
775
  --gw-inputtext-shadow-type: dropShadow;
775
776
  --gw-inputtext-shadow-offset-x: 0;
776
- --gw-inputtext-shadow-offset-y: 10px;
777
- --gw-toggleswitch-shadow-blur: 10px;
777
+ --gw-inputtext-shadow-offset-y: 1px;
778
+ --gw-toggleswitch-shadow-blur: 2px;
778
779
  --gw-toggleswitch-shadow-spread: 0;
779
780
  --gw-toggleswitch-shadow-type: dropShadow;
780
781
  --gw-toggleswitch-shadow-offset-x: 0;
781
- --gw-toggleswitch-shadow-offset-y: 10px;
782
+ --gw-toggleswitch-shadow-offset-y: 1px;
782
783
  --gw-toggleswitch-focus-ring-shadow-blur: 0;
783
784
  --gw-toggleswitch-focus-ring-shadow-spread: 0;
784
785
  --gw-toggleswitch-focus-ring-shadow-type: dropShadow;
@@ -789,31 +790,31 @@
789
790
  --gw-radiobutton-focus-ring-shadow-type: dropShadow;
790
791
  --gw-radiobutton-focus-ring-shadow-offset-x: 0;
791
792
  --gw-radiobutton-focus-ring-shadow-offset-y: 0;
792
- --gw-radiobutton-shadow-blur: 10px;
793
+ --gw-radiobutton-shadow-blur: 2px;
793
794
  --gw-radiobutton-shadow-spread: 0;
794
795
  --gw-radiobutton-shadow-type: dropShadow;
795
796
  --gw-radiobutton-shadow-offset-x: 0;
796
- --gw-radiobutton-shadow-offset-y: 10px;
797
+ --gw-radiobutton-shadow-offset-y: 1px;
797
798
  --gw-checkbox-focus-ring-shadow-blur: 0;
798
799
  --gw-checkbox-focus-ring-shadow-spread: 0;
799
800
  --gw-checkbox-focus-ring-shadow-type: dropShadow;
800
801
  --gw-checkbox-focus-ring-shadow-offset-x: 0;
801
802
  --gw-checkbox-focus-ring-shadow-offset-y: 0;
802
- --gw-checkbox-shadow-blur: 10px;
803
+ --gw-checkbox-shadow-blur: 2px;
803
804
  --gw-checkbox-shadow-spread: 0;
804
805
  --gw-checkbox-shadow-type: dropShadow;
805
806
  --gw-checkbox-shadow-offset-x: 0;
806
- --gw-checkbox-shadow-offset-y: 10px;
807
+ --gw-checkbox-shadow-offset-y: 1px;
807
808
  --gw-autocomplete-focus-ring-shadow-blur: 0;
808
809
  --gw-autocomplete-focus-ring-shadow-spread: 0;
809
810
  --gw-autocomplete-focus-ring-shadow-type: dropShadow;
810
811
  --gw-autocomplete-focus-ring-shadow-offset-x: 0;
811
812
  --gw-autocomplete-focus-ring-shadow-offset-y: 0;
812
- --gw-autocomplete-shadow-blur: 10px;
813
+ --gw-autocomplete-shadow-blur: 2px;
813
814
  --gw-autocomplete-shadow-spread: 0;
814
815
  --gw-autocomplete-shadow-type: dropShadow;
815
816
  --gw-autocomplete-shadow-offset-x: 0;
816
- --gw-autocomplete-shadow-offset-y: 10px;
817
+ --gw-autocomplete-shadow-offset-y: 1px;
817
818
  --gw-autocomplete-overlay-shadow-1-blur: 6px;
818
819
  --gw-autocomplete-overlay-shadow-1-spread: -1px;
819
820
  --gw-autocomplete-overlay-shadow-1-color: rgba(255, 255, 255, 0.1);
@@ -964,11 +965,11 @@
964
965
  --gw-cascadeselect-focus-ring-shadow-type: dropShadow;
965
966
  --gw-cascadeselect-focus-ring-shadow-offset-x: 0;
966
967
  --gw-cascadeselect-focus-ring-shadow-offset-y: 0;
967
- --gw-cascadeselect-shadow-blur: 10px;
968
+ --gw-cascadeselect-shadow-blur: 2px;
968
969
  --gw-cascadeselect-shadow-spread: 0;
969
970
  --gw-cascadeselect-shadow-type: dropShadow;
970
971
  --gw-cascadeselect-shadow-offset-x: 0;
971
- --gw-cascadeselect-shadow-offset-y: 10px;
972
+ --gw-cascadeselect-shadow-offset-y: 1px;
972
973
  --gw-cascadeselect-overlay-shadow-1-blur: 6px;
973
974
  --gw-cascadeselect-overlay-shadow-1-spread: -1px;
974
975
  --gw-cascadeselect-overlay-shadow-1-color: rgba(255, 255, 255, 0.1);
@@ -1000,11 +1001,11 @@
1000
1001
  --gw-select-focus-ring-shadow-type: dropShadow;
1001
1002
  --gw-select-focus-ring-shadow-offset-x: 0;
1002
1003
  --gw-select-focus-ring-shadow-offset-y: 0;
1003
- --gw-select-shadow-blur: 10px;
1004
+ --gw-select-shadow-blur: 2px;
1004
1005
  --gw-select-shadow-spread: 0;
1005
1006
  --gw-select-shadow-type: dropShadow;
1006
1007
  --gw-select-shadow-offset-x: 0;
1007
- --gw-select-shadow-offset-y: 10px;
1008
+ --gw-select-shadow-offset-y: 1px;
1008
1009
  --gw-select-overlay-shadow-1-blur: 6px;
1009
1010
  --gw-select-overlay-shadow-1-spread: -1px;
1010
1011
  --gw-select-overlay-shadow-1-color: rgba(255, 255, 255, 0.1);
@@ -1032,31 +1033,31 @@
1032
1033
  --gw-textarea-focus-ring-shadow-type: dropShadow;
1033
1034
  --gw-textarea-focus-ring-shadow-offset-x: 0;
1034
1035
  --gw-textarea-focus-ring-shadow-offset-y: 0;
1035
- --gw-textarea-shadow-blur: 10px;
1036
+ --gw-textarea-shadow-blur: 2px;
1036
1037
  --gw-textarea-shadow-spread: 0;
1037
1038
  --gw-textarea-shadow-type: dropShadow;
1038
1039
  --gw-textarea-shadow-offset-x: 0;
1039
- --gw-textarea-shadow-offset-y: 10px;
1040
+ --gw-textarea-shadow-offset-y: 1px;
1040
1041
  --gw-knob-focus-ring-shadow-blur: 0;
1041
1042
  --gw-knob-focus-ring-shadow-spread: 0;
1042
1043
  --gw-knob-focus-ring-shadow-type: dropShadow;
1043
1044
  --gw-knob-focus-ring-shadow-offset-x: 0;
1044
1045
  --gw-knob-focus-ring-shadow-offset-y: 0;
1045
- --gw-listbox-shadow-blur: 10px;
1046
+ --gw-listbox-shadow-blur: 2px;
1046
1047
  --gw-listbox-shadow-spread: 0;
1047
1048
  --gw-listbox-shadow-type: dropShadow;
1048
1049
  --gw-listbox-shadow-offset-x: 0;
1049
- --gw-listbox-shadow-offset-y: 10px;
1050
+ --gw-listbox-shadow-offset-y: 1px;
1050
1051
  --gw-multiselect-focus-ring-shadow-blur: 0;
1051
1052
  --gw-multiselect-focus-ring-shadow-spread: 0;
1052
1053
  --gw-multiselect-focus-ring-shadow-type: dropShadow;
1053
1054
  --gw-multiselect-focus-ring-shadow-offset-x: 0;
1054
1055
  --gw-multiselect-focus-ring-shadow-offset-y: 0;
1055
- --gw-multiselect-shadow-blur: 10px;
1056
+ --gw-multiselect-shadow-blur: 2px;
1056
1057
  --gw-multiselect-shadow-spread: 0;
1057
1058
  --gw-multiselect-shadow-type: dropShadow;
1058
1059
  --gw-multiselect-shadow-offset-x: 0;
1059
- --gw-multiselect-shadow-offset-y: 10px;
1060
+ --gw-multiselect-shadow-offset-y: 1px;
1060
1061
  --gw-multiselect-overlay-shadow-1-blur: 6px;
1061
1062
  --gw-multiselect-overlay-shadow-1-spread: -1px;
1062
1063
  --gw-multiselect-overlay-shadow-1-color: rgba(255, 255, 255, 0.1);
@@ -1117,11 +1118,11 @@
1117
1118
  --gw-treeselect-focus-ring-shadow-type: dropShadow;
1118
1119
  --gw-treeselect-focus-ring-shadow-offset-x: 0;
1119
1120
  --gw-treeselect-focus-ring-shadow-offset-y: 0;
1120
- --gw-treeselect-shadow-blur: 10px;
1121
+ --gw-treeselect-shadow-blur: 2px;
1121
1122
  --gw-treeselect-shadow-spread: 0;
1122
1123
  --gw-treeselect-shadow-type: dropShadow;
1123
1124
  --gw-treeselect-shadow-offset-x: 0;
1124
- --gw-treeselect-shadow-offset-y: 10px;
1125
+ --gw-treeselect-shadow-offset-y: 1px;
1125
1126
  --gw-treeselect-overlay-shadow-1-blur: 6px;
1126
1127
  --gw-treeselect-overlay-shadow-1-spread: -1px;
1127
1128
  --gw-treeselect-overlay-shadow-1-color: rgba(255, 255, 255, 0.1);
@@ -1586,7 +1587,7 @@
1586
1587
  --gw-neutral-700: var(--gw-main-gray-700);
1587
1588
  --gw-neutral-800: var(--gw-main-gray-800);
1588
1589
  --gw-neutral-900: var(--gw-main-gray-900);
1589
- --gw-neutral-shadow: var(--gw-main-gray-900-0-1);
1590
+ --gw-neutral-shadow: var(--gw-main-gray-900-0-05);
1590
1591
  --gw-tertiary-100: var(--gw-main-teal-100);
1591
1592
  --gw-tertiary-200: var(--gw-main-teal-200);
1592
1593
  --gw-tertiary-300: var(--gw-main-teal-300);
@@ -1619,7 +1620,7 @@
1619
1620
  --gw-button-icon-size: var(--gw-icon-size);
1620
1621
  --gw-button-label-font-weight: var(--gw-font-weight-400);
1621
1622
  --gw-button-label-font-size: var(--gw-base-font-size);
1622
- --gw-button-label-line-height: var(--gw-1rem-line-height);
1623
+ --gw-button-label-line-height: var(--gw-xxs-line-height);
1623
1624
  --gw-button-label-font-family: var(--gw-font-family-body);
1624
1625
  --gw-button-focus-ring-width: var(--gw-focus-ring-width);
1625
1626
  --gw-button-focus-ring-offset: var(--gw-focus-ring-offset);
@@ -1633,9 +1634,12 @@
1633
1634
  --gw-inputtext-sm-padding-y: var(--gw-form-field-sm-padding-y);
1634
1635
  --gw-inputtext-lg-padding-x: var(--gw-form-field-lg-padding-x);
1635
1636
  --gw-inputtext-lg-padding-y: var(--gw-form-field-lg-padding-y);
1636
- --gw-toggleswitch-handle-border-radius: var(--gw-toggleswitch-handle-size)/2;
1637
+ --gw-toggleswitch-height: var(--gw-size-1);
1638
+ --gw-toggleswitch-gap: var(--gw-space-0-125);
1639
+ --gw-toggleswitch-handle-size: var(--gw-size-0-75);
1637
1640
  --gw-toggleswitch-focus-ring-width: var(--gw-focus-ring-width);
1638
1641
  --gw-toggleswitch-focus-ring-offset: var(--gw-focus-ring-offset);
1642
+ --gw-floatlabel-in-input-padding-top: var(--gw-space-1-125);
1639
1643
  --gw-floatlabel-on-border-radius: var(--gw-border-radius-xs);
1640
1644
  --gw-radiobutton-focus-ring-width: var(--gw-focus-ring-width);
1641
1645
  --gw-radiobutton-focus-ring-offset: var(--gw-focus-ring-offset);
@@ -1666,6 +1670,7 @@
1666
1670
  --gw-rating-focus-ring-offset: var(--gw-focus-ring-offset);
1667
1671
  --gw-rating-transition-duration: var(--gw-transition-duration);
1668
1672
  --gw-badge-border-radius: var(--gw-border-radius-md);
1673
+ --gw-chip-padding-y: var(--gw-space-0-125);
1669
1674
  --gw-chip-remove-icon-focus-ring-width: var(--gw-focus-ring-width);
1670
1675
  --gw-chip-remove-icon-focus-ring-offset: var(--gw-focus-ring-offset);
1671
1676
  --gw-chip-transition-duration: var(--gw-transition-duration);
@@ -1969,6 +1974,22 @@
1969
1974
  --gw-body-lg-bold-font-weight: var(--gw-font-weight-700);
1970
1975
  --gw-body-lg-bold-line-height: var(--gw-lg-line-height);
1971
1976
  --gw-body-lg-bold-font-size: var(--gw-lg-font-size);
1977
+ --gw-body-xs-light-font-family: var(--gw-font-family-body);
1978
+ --gw-body-xs-light-font-weight: var(--gw-font-weight-300);
1979
+ --gw-body-xs-light-line-height: var(--gw-xs-line-height);
1980
+ --gw-body-xs-light-font-size: var(--gw-xs-font-size);
1981
+ --gw-body-xs-regular-font-family: var(--gw-font-family-body);
1982
+ --gw-body-xs-regular-font-weight: var(--gw-font-weight-400);
1983
+ --gw-body-xs-regular-line-height: var(--gw-xs-line-height);
1984
+ --gw-body-xs-regular-font-size: var(--gw-xs-font-size);
1985
+ --gw-body-xs-medium-font-family: var(--gw-font-family-body);
1986
+ --gw-body-xs-medium-font-weight: var(--gw-font-weight-500);
1987
+ --gw-body-xs-medium-line-height: var(--gw-xs-line-height);
1988
+ --gw-body-xs-medium-font-size: var(--gw-xs-font-size);
1989
+ --gw-body-xs-bold-font-family: var(--gw-font-family-body);
1990
+ --gw-body-xs-bold-font-weight: var(--gw-font-weight-700);
1991
+ --gw-body-xs-bold-line-height: var(--gw-xs-line-height);
1992
+ --gw-body-xs-bold-font-size: var(--gw-xs-font-size);
1972
1993
  --gw-caption-base-font-family: var(--gw-font-family-body);
1973
1994
  --gw-caption-base-font-weight: var(--gw-font-weight-600);
1974
1995
  --gw-caption-base-line-height: var(--gw-1rem-line-height);
@@ -1979,15 +2000,15 @@
1979
2000
  --gw-caption-sm-font-size: var(--gw-xs-font-size);
1980
2001
  --gw-label-base-regular-font-family: var(--gw-font-family-body);
1981
2002
  --gw-label-base-regular-font-weight: var(--gw-font-weight-400);
1982
- --gw-label-base-regular-line-height: var(--gw-1rem-line-height);
2003
+ --gw-label-base-regular-line-height: var(--gw-xxs-line-height);
1983
2004
  --gw-label-base-regular-font-size: var(--gw-base-font-size);
1984
2005
  --gw-label-base-medium-font-family: var(--gw-font-family-body);
1985
2006
  --gw-label-base-medium-font-weight: var(--gw-font-weight-500);
1986
- --gw-label-base-medium-line-height: var(--gw-1rem-line-height);
2007
+ --gw-label-base-medium-line-height: var(--gw-xxs-line-height);
1987
2008
  --gw-label-base-medium-font-size: var(--gw-base-font-size);
1988
2009
  --gw-label-base-bold-font-family: var(--gw-font-family-body);
1989
2010
  --gw-label-base-bold-font-weight: var(--gw-font-weight-700);
1990
- --gw-label-base-bold-line-height: var(--gw-1rem-line-height);
2011
+ --gw-label-base-bold-line-height: var(--gw-xxs-line-height);
1991
2012
  --gw-label-base-bold-font-size: var(--gw-base-font-size);
1992
2013
  --gw-label-sm-regular-font-family: var(--gw-font-family-body);
1993
2014
  --gw-label-sm-regular-font-weight: var(--gw-font-weight-400);
@@ -2017,7 +2038,7 @@
2017
2038
  --gw-card-shadow-2-color: var(--gw-main-gray-900-50);
2018
2039
  --gw-tabs-tab-label-font-family: var(--gw-font-family-body);
2019
2040
  --gw-tabs-tab-label-font-weight: var(--gw-font-weight-400);
2020
- --gw-tabs-tab-label-line-height: var(--gw-1rem-line-height);
2041
+ --gw-tabs-tab-label-line-height: var(--gw-xxs-line-height);
2021
2042
  --gw-tabs-tab-label-font-size: var(--gw-base-font-size);
2022
2043
  --gw-fileupload-header-stroke-color: var(--gw-fileupload-header-border-color);
2023
2044
  --gw-fileupload-header-stroke-width: var(--gw-fileupload-header-border-width);
@@ -2058,6 +2079,8 @@
2058
2079
  --gw-tertiary-text: var(--gw-tertiary-dark);
2059
2080
  --gw-tertiary-hover-color: var(--gw-tertiary-dark);
2060
2081
  --gw-tertiary-active-color: var(--gw-tertiary-light);
2082
+ --gw-disabled-background: var(--gw-neutral-200);
2083
+ --gw-disabled-color: var(--gw-neutral-600);
2061
2084
  --gw-form-field-border-radius: var(--gw-defaul-border-radius);
2062
2085
  --gw-form-field-disabled-color: var(--gw-neutral-600);
2063
2086
  --gw-form-field-filled-background: var(--gw-neutral-100);
@@ -2120,7 +2143,7 @@
2120
2143
  --gw-button-text-contrast-active-background: var(--gw-neutral-100);
2121
2144
  --gw-body-background: var(--gw-neutral-0);
2122
2145
  --gw-muted-background: var(--gw-neutral-200);
2123
- --gw-muted-color: var(--gw-neutral-600);
2146
+ --gw-muted-color: var(--gw-neutral-700);
2124
2147
  --gw-error-base: var(--gw-danger-700);
2125
2148
  --gw-error-lighter: var(--gw-danger-200);
2126
2149
  --gw-error-light: var(--gw-danger-600);
@@ -2132,8 +2155,8 @@
2132
2155
  --gw-mask-color: var(--gw-neutral-200);
2133
2156
  --gw-hover-color: var(--gw-neutral-800);
2134
2157
  --gw-hover-background: var(--gw-neutral-200);
2135
- --gw-hover-border-color: var(--gw-neutral-300);
2136
- --gw-default-border-color: var(--gw-neutral-200);
2158
+ --gw-hover-border-color: var(--gw-neutral-400);
2159
+ --gw-default-border-color: var(--gw-neutral-300);
2137
2160
  --gw-default-background: var(--gw-neutral-0);
2138
2161
  --gw-inputtext-border-radius: var(--gw-defaul-border-radius);
2139
2162
  --gw-inputtext-focus-ring-style: var(--gw-form-field-focus-ring-style);
@@ -2142,6 +2165,7 @@
2142
2165
  --gw-inputtext-padding-y: var(--gw-form-field-padding-y);
2143
2166
  --gw-inputtext-transition-duration: var(--gw-form-field-transition-duration);
2144
2167
  --gw-toggleswitch-hover-background: var(--gw-neutral-400);
2168
+ --gw-toggleswitch-handle-border-radius: var(--gw-toggleswitch-handle-size)/2;
2145
2169
  --gw-toggleswitch-handle-background: var(--gw-neutral-0);
2146
2170
  --gw-toggleswitch-handle-hover-background: var(--gw-neutral-0);
2147
2171
  --gw-toggleswitch-handle-checked-background: var(--gw-neutral-0);
@@ -2263,6 +2287,8 @@
2263
2287
  --gw-splitter-handle-focus-ring-style: var(--gw-focus-ring-style);
2264
2288
  --gw-scrollpanel-bar-focus-ring-style: var(--gw-focus-ring-style);
2265
2289
  --gw-scrollpanel-bar-background: var(--gw-neutral-100);
2290
+ --gw-tabs-tab-hover-background: var(--gw-neutral-200);
2291
+ --gw-tabs-tab-hover-border-color: var(--gw-neutral-200);
2266
2292
  --gw-tabs-tab-focus-ring-style: var(--gw-focus-ring-style);
2267
2293
  --gw-tabs-tabpanel-focus-ring-style: var(--gw-focus-ring-style);
2268
2294
  --gw-tabs-nav-button-focus-ring-style: var(--gw-focus-ring-style);
@@ -2864,11 +2890,13 @@
2864
2890
  --gw-splitter-handle-border-radius: var(--gw-content-border-radius);
2865
2891
  --gw-tabs-tablist-background: var(--gw-default-background);
2866
2892
  --gw-tabs-tablist-border-color: var(--gw-default-border-color);
2867
- --gw-tabs-tab-border-color: var(--gw-default-border-color);
2868
- --gw-tabs-tab-active-border-color: var(--gw-default-background);
2893
+ --gw-tabs-tab-border-color: var(--gw-neutral-lighter);
2894
+ --gw-tabs-tab-border-bottom-color: var(--gw-default-border-color);
2895
+ --gw-tabs-tab-active-border-bottom-color: var(--gw-default-background);
2896
+ --gw-tabs-tab-active-border-color: var(--gw-default-border-color);
2869
2897
  --gw-tabs-tab-active-background: var(--gw-default-background);
2870
2898
  --gw-tabs-tab-color: var(--gw-neutral-dark);
2871
- --gw-tabs-tab-hover-border-color: var(--gw-default-border-color);
2899
+ --gw-tabs-tab-hover-border-bottom-color: var(--gw-default-border-color);
2872
2900
  --gw-tabs-tab-background: var(--gw-neutral-lighter);
2873
2901
  --gw-tabs-tabpanel-background: var(--gw-default-background);
2874
2902
  --gw-tabs-nav-button-background: var(--gw-default-background);
@@ -3086,10 +3114,10 @@
3086
3114
  --gw-warning-text: var(--gw-help-dark);
3087
3115
  --gw-form-field-float-label-invalid-color: var(--gw-form-field-invalid-placeholder-color);
3088
3116
  --gw-border-color-success: var(--gw-success-base);
3089
- --gw-list-option-group-color: var(--gw-text-muted-color);
3117
+ --gw-list-option-group-color: var(--gw-inputtext-disabled-color);
3090
3118
  --gw-list-option-selected-focus-background: var(--gw-highlight-focus-background);
3091
3119
  --gw-list-option-selected-focus-color: var(--gw-highlight-focus-color);
3092
- --gw-list-option-selected-color: var(--gw-highlight-color);
3120
+ --gw-list-option-selected-color: var(--gw-text-color);
3093
3121
  --gw-list-option-color: var(--gw-text-color);
3094
3122
  --gw-navigation-item-color: var(--gw-text-color);
3095
3123
  --gw-navigation-submenuitem-active-color: var(--gw-primary-contrast-color);
package/package.json CHANGED
@@ -1,17 +1,19 @@
1
1
  {
2
2
  "name": "graphwise-styleguide",
3
- "version": "0.0.1-init6",
3
+ "version": "0.0.1-init8",
4
4
  "license": "Apache-2.0",
5
5
  "type": "module",
6
6
  "scripts": {
7
7
  "build": "rm -rf dist && npm run build:tokens",
8
8
  "build:tokens": "node src/index.js",
9
+ "compare-css-variables": "node src/compare-css-variables.js",
9
10
  "lint": "eslint --ext js,mjs,cjs",
10
11
  "lint:fix": "eslint --fix --ext js,mjs,cjs",
11
12
  "stylelint": "stylelint \"src/**/*.{css,scss}\"",
12
13
  "stylelint:fix": "stylelint \"src/**/*.{css,scss}\" --fix",
13
14
  "test": "cross-env BABEL_ENV=test jest --passWithNoTests",
14
15
  "watch-tests": "cross-env BABEL_ENV=test jest --watch",
16
+ "generate": "npm run compare-css-variables && npm run generate-tokens-html",
15
17
  "generate-tokens-html": "node src/generate-tokens-html.js"
16
18
  },
17
19
  "files": [