You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardexpand all lines: apps/docs/components/components/iconbase.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -28,7 +28,7 @@ List of all icons shipped with Storefront UI below. Click on any of the icons to
28
28
29
29
### Sizes
30
30
31
-
All Icon components supports various sizes that can be set with the `size` prop: `'xs'`, `'sm'`, `'base'`, `'lg'`, `'xl'`, `'2xl'`, `'3xl'`, `'4xl'`.
31
+
All Icon components supports various sizes that can be set with the `size` prop: `'xs'`, `'sm'`, `'base'`, `'lg'`, `'xl'`, `'2xl'`, `'3xl'`, `'4xl'` . Size can be overwritten by applying new styling on icon.
Copy file name to clipboardexpand all lines: apps/docs/components/customization/theming.md
+74-73
Original file line number
Diff line number
Diff line change
@@ -5,7 +5,9 @@ hideBreadcrumbs: true
5
5
6
6
# Theming
7
7
8
-
To help you build your storefront, Storefront UI adds additional colors following Tailwind's shading conventions. These can be customized customized with CSS variables or Tailwind configuration to match your design system.
8
+
UI colors are based on 10-tone Tailwind default color palette, normalized so that each color at the same brightness level meets identical minimum accessibility requirements.
9
+
10
+
To help you build your storefront, Storefront UI adds additional colors following Tailwind's shading conventions. These can be customized customized with CSS variables or Tailwind configuration to match your design system.
9
11
10
12
## Default Values
11
13
@@ -17,7 +19,6 @@ In addition to [Tailwind's default colors](https://tailwindcss.com/docs/customiz
17
19
You can see all of the default colors, classes, variants, and more in our [Tailwind preset](https://github.com/vuestorefront/storefront-ui/blob/v2/packages/config/tailwind/index.ts)
18
20
:::
19
21
20
-
21
22
## Customizing colors
22
23
23
24
### CSS Variables
@@ -67,88 +68,88 @@ The CSS classes for Storefront UI colors follow the pattern of `--colors-{color}
67
68
```css
68
69
:root {
69
70
/* Primary */
70
-
--colors-primary-50: 240253244;
71
-
--colors-primary-100: 220252231;
72
-
--colors-primary-200: 187247208;
73
-
--colors-primary-300: 134239172;
74
-
--colors-primary-400: 74222128;
75
-
--colors-primary-500: 219882;
76
-
--colors-primary-600: 1017169;
77
-
--colors-primary-700: 113755;
78
-
--colors-primary-800: 2210152;
79
-
--colors-primary-900: 208345;
71
+
--colors-primary-50: 235255242;
72
+
--colors-primary-100: 217253228;
73
+
--colors-primary-200: 171241192;
74
+
--colors-primary-300: 130234158;
75
+
--colors-primary-400: 60224120;
76
+
--colors-primary-500: 1919596;
77
+
--colors-primary-600: 716179;
78
+
--colors-primary-700: 1312763;
79
+
--colors-primary-800: 168646;
80
+
--colors-primary-900: 155030;
80
81
81
82
/* Secondary */
82
-
--colors-secondary-50: 245243255;
83
-
--colors-secondary-100: 237233254;
84
-
--colors-secondary-200: 221214254;
85
-
--colors-secondary-300: 196181253;
86
-
--colors-secondary-400: 167139250;
87
-
--colors-secondary-500: 13592246;
88
-
--colors-secondary-600: 11164236;
89
-
--colors-secondary-700: 9749221;
90
-
--colors-secondary-800: 8330211;
91
-
--colors-secondary-900: 6821178;
83
+
--colors-secondary-50: 247245253;
84
+
--colors-secondary-100: 239236251;
85
+
--colors-secondary-200: 225218246;
86
+
--colors-secondary-300: 216203245;
87
+
--colors-secondary-400: 198177246;
88
+
--colors-secondary-500: 180151249;
89
+
--colors-secondary-600: 151111238;
90
+
--colors-secondary-700: 11979209;
91
+
--colors-secondary-800: 8252153;
92
+
--colors-secondary-900: 483286;
92
93
93
94
/* Positive */
94
-
--colors-positive-50: 240253244;
95
-
--colors-positive-100: 220252231;
96
-
--colors-positive-200: 187247208;
97
-
--colors-positive-300: 134239172;
98
-
--colors-positive-400: 74222128;
99
-
--colors-positive-500: 219882;
100
-
--colors-positive-600: 1017169;
101
-
--colors-positive-700: 113755;
102
-
--colors-positive-800: 2210152;
103
-
--colors-positive-900: 208345;
95
+
--colors-positive-50: 235255242;
96
+
--colors-positive-100: 217253228;
97
+
--colors-positive-200: 171241192;
98
+
--colors-positive-300: 130234158;
99
+
--colors-positive-400: 60224120;
100
+
--colors-positive-500: 1919596;
101
+
--colors-positive-600: 716179;
102
+
--colors-positive-700: 1312763;
103
+
--colors-positive-800: 168646;
104
+
--colors-positive-900: 155030;
104
105
105
106
/* Negative */
106
-
--colors-negative-50: 255241242;
107
-
--colors-negative-100: 255228230;
108
-
--colors-negative-200: 254205211;
109
-
--colors-negative-300: 253164175;
110
-
--colors-negative-400: 251113133;
111
-
--colors-negative-500: 2446394;
112
-
--colors-negative-600: 2252972;
113
-
--colors-negative-700: 1901860;
114
-
--colors-negative-800: 1591857;
115
-
--colors-negative-900: 13619551;
107
+
--colors-negative-50: 255245247;
108
+
--colors-negative-100: 255232237;
109
+
--colors-negative-200: 254211219;
110
+
--colors-negative-300: 253193202;
111
+
--colors-negative-400: 255163175;
112
+
--colors-negative-500: 255127143;
113
+
--colors-negative-600: 2405991;
114
+
--colors-negative-700: 2081348;
115
+
--colors-negative-800: 141833;
116
+
--colors-negative-900: 761523;
116
117
117
118
/* Warning */
118
-
--colors-warning-50: 254252232;
119
-
--colors-warning-100: 254249195;
120
-
--colors-warning-200: 254240138;
121
-
--colors-warning-300: 25322471;
122
-
--colors-warning-400: 25020421;
123
-
--colors-warning-500: 2341798;
124
-
--colors-warning-600: 2021384;
125
-
--colors-warning-700: 161987;
126
-
--colors-warning-800: 1337714;
127
-
--colors-warning-900: 1136318;
119
+
--colors-warning-50: 254247236;
120
+
--colors-warning-100: 255238211;
121
+
--colors-warning-200: 254220165;
122
+
--colors-warning-300: 254202132;
123
+
--colors-warning-400: 25518177;
124
+
--colors-warning-500: 23715314;
125
+
--colors-warning-600: 19112117;
126
+
--colors-warning-700: 157933;
127
+
--colors-warning-800: 109639;
128
+
--colors-warning-900: 623510;
128
129
129
130
/* Neutral */
130
-
--colors-neutral-50: 250250250;
131
-
--colors-neutral-100: 244244245;
132
-
--colors-neutral-200: 228228231;
133
-
--colors-neutral-300: 212212216;
134
-
--colors-neutral-400: 161161170;
135
-
--colors-neutral-500: 113113122;
136
-
--colors-neutral-600: 828291;
137
-
--colors-neutral-700: 636370;
138
-
--colors-neutral-800: 393942;
139
-
--colors-neutral-900: 242427;
131
+
--colors-neutral-50: 249251250;
132
+
--colors-neutral-100: 239244241;
133
+
--colors-neutral-200: 217226220;
134
+
--colors-neutral-300: 187198190;
135
+
--colors-neutral-400: 129140133;
136
+
--colors-neutral-500: 100111104;
137
+
--colors-neutral-600: 778679;
138
+
--colors-neutral-700: 566559;
139
+
--colors-neutral-800: 374339;
140
+
--colors-neutral-900: 212622;
140
141
141
142
/* Disabled */
142
-
--colors-disabled-50: 250250250;
143
-
--colors-disabled-100: 244244245;
144
-
--colors-disabled-200: 228228231;
145
-
--colors-disabled-300: 212212216;
146
-
--colors-disabled-400: 161161170;
147
-
--colors-disabled-500: 113113122;
148
-
--colors-disabled-600: 828291;
149
-
--colors-disabled-700: 636370;
150
-
--colors-disabled-800: 393942;
151
-
--colors-disabled-900: 242427;
143
+
--colors-disabled-50: 249251250;
144
+
--colors-disabled-100: 239244241;
145
+
--colors-disabled-200: 217226220;
146
+
--colors-disabled-300: 187198190;
147
+
--colors-disabled-400: 129140133;
148
+
--colors-disabled-500: 100111104;
149
+
--colors-disabled-600: 778679;
150
+
--colors-disabled-700: 566559;
151
+
--colors-disabled-800: 374339;
152
+
--colors-disabled-900: 212622;
152
153
}
153
154
```
154
155
</SourceCode>
@@ -189,4 +190,4 @@ export default {
189
190
190
191
:::read-more
191
192
To learn more about the different ways to declare colors in Tailwind, check out the [Tailwind documentation](https://tailwindcss.com/docs/customizing-colors#using-custom-colors).
-[#3070](https://github.com/vuestorefront/storefront-ui/pull/3070)[`e15a3f6cb`](https://github.com/vuestorefront/storefront-ui/commit/e15a3f6cb56fd28b2e9a0bd525e9fcbde44d29f6) Thanks [@Szymon-dziewonski](https://github.com/Szymon-dziewonski)! - Change general rules for styling
8
+
9
+
### Patch Changes
10
+
11
+
-[#3073](https://github.com/vuestorefront/storefront-ui/pull/3073)[`a40579d26`](https://github.com/vuestorefront/storefront-ui/commit/a40579d26c2912c5d4d05e1a833801e3e87901b3) Thanks [@Szymon-dziewonski](https://github.com/Szymon-dziewonski)! - Change `Inter Display` into `Inter`
0 commit comments