@acorex/styles 19.10.0-next.12 → 19.10.0-next.13

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 (7) hide show
  1. package/components/_editor-container.scss +1 -1
  2. package/generators/index.js +1 -0
  3. package/generators/tailwind-class-generator.js +52 -0
  4. package/mixins/_scroll-bar.scss +16 -4
  5. package/package.json +1 -1
  6. package/tailwind-base.js +56 -75
  7. package/themes/default.scss +3 -0
package/components/_editor-container.scss CHANGED
@@ -165,7 +165,7 @@
165
165
  }
166
166
 
167
167
  > ax-prefix {
168
- padding-inline-start: var(--ax-comp-editor-space-end-size);
168
+ padding-inline-start: var(--ax-comp-editor-space-start-size);
169
169
  }
170
170
 
171
171
  > ax-suffix,
package/generators/index.js ADDED
@@ -0,0 +1 @@
1
+ export * from './tailwind-class-generator';
package/generators/tailwind-class-generator.js ADDED
@@ -0,0 +1,52 @@
1
+ export const createPalette = function (colorName) {
2
+ return {
3
+ DEFAULT: `rgba(var(--ax-sys-color-${colorName}-500), <alpha-value>)`,
4
+ default: `rgba(var(--ax-sys-color-${colorName}-500), <alpha-value>)`,
5
+ 50: `rgba(var(--ax-sys-color-${colorName}-50), <alpha-value>)`,
6
+ 100: `rgba(var(--ax-sys-color-${colorName}-100), <alpha-value>)`,
7
+ 200: `rgba(var(--ax-sys-color-${colorName}-200), <alpha-value>)`,
8
+ 300: `rgba(var(--ax-sys-color-${colorName}-300), <alpha-value>)`,
9
+ 400: `rgba(var(--ax-sys-color-${colorName}-400), <alpha-value>)`,
10
+ 500: `rgba(var(--ax-sys-color-${colorName}-500), <alpha-value>)`,
11
+ 600: `rgba(var(--ax-sys-color-${colorName}-600), <alpha-value>)`,
12
+ 700: `rgba(var(--ax-sys-color-${colorName}-700), <alpha-value>)`,
13
+ 800: `rgba(var(--ax-sys-color-${colorName}-800), <alpha-value>)`,
14
+ 900: `rgba(var(--ax-sys-color-${colorName}-900), <alpha-value>)`,
15
+ 950: `rgba(var(--ax-sys-color-${colorName}-950), <alpha-value>)`,
16
+ };
17
+ };
18
+ export const createSurfaces = function (colorName) {
19
+ return {
20
+ lightest: `rgba(var(--ax-sys-color-${colorName}-lightest-surface), <alpha-value>)`,
21
+ lighter: `rgba(var(--ax-sys-color-${colorName}-lighter-surface), <alpha-value>)`,
22
+ light: `rgba(var(--ax-sys-color-${colorName}-light-surface), <alpha-value>)`,
23
+ surface: `rgba(var(--ax-sys-color-${colorName}-surface), <alpha-value>)`,
24
+ dark: `rgba(var(--ax-sys-color-${colorName}-dark-surface), <alpha-value>)`,
25
+ darker: `rgba(var(--ax-sys-color-${colorName}-darker-surface), <alpha-value>)`,
26
+ darkest: `rgba(var(--ax-sys-color-${colorName}-darkest-surface), <alpha-value>)`,
27
+ on: `rgba(var(--ax-sys-color-on-${colorName}), <alpha-value>)`,
28
+ };
29
+ };
30
+ export const createOnSurfaces = function (colorName) {
31
+ return {
32
+ 'on-lightest': `rgba(var(--ax-sys-color-on-${colorName}-lightest-surface), <alpha-value>)`,
33
+ 'on-lighter': `rgba(var(--ax-sys-color-on-${colorName}-lighter-surface), <alpha-value>)`,
34
+ 'on-light': `rgba(var(--ax-sys-color-on-${colorName}-light-surface), <alpha-value>)`,
35
+ 'on-surface': `rgba(var(--ax-sys-color-on-${colorName}-surface), <alpha-value>)`,
36
+ 'on-dark': `rgba(var(--ax-sys-color-on-${colorName}-dark-surface), <alpha-value>)`,
37
+ 'on-darker': `rgba(var(--ax-sys-color-on-${colorName}-darker-surface), <alpha-value>)`,
38
+ 'on-darkest': `rgba(var(--ax-sys-color-on-${colorName}-darkest-surface), <alpha-value>)`,
39
+ 'on-contrast': `rgba(var(--ax-sys-color-on-contrast-${colorName}), <alpha-value>)`,
40
+ };
41
+ };
42
+ export const createBorderSurfaces = function (colorName) {
43
+ return {
44
+ lightest: `rgba(var(--ax-sys-color-border-${colorName}-lightest-surface), <alpha-value>)`,
45
+ lighter: `rgba(var(--ax-sys-color-border-${colorName}-lighter-surface), <alpha-value>)`,
46
+ light: `rgba(var(--ax-sys-color-border-${colorName}-light-surface), <alpha-value>)`,
47
+ surface: `rgba(var(--ax-sys-color-border-${colorName}-surface), <alpha-value>)`,
48
+ dark: `rgba(var(--ax-sys-color-border-${colorName}-dark-surface), <alpha-value>)`,
49
+ darker: `rgba(var(--ax-sys-color-border-${colorName}-darker-surface), <alpha-value>)`,
50
+ darkest: `rgba(var(--ax-sys-color-border-${colorName}-darkest-surface), <alpha-value>)`,
51
+ };
52
+ };
package/mixins/_scroll-bar.scss CHANGED
@@ -1,14 +1,26 @@
1
1
  @mixin scroll-bar() {
2
2
  :root,
3
3
  * {
4
- --ax-sys-scroller-size-width: 5px;
4
+ --ax-sys-scroller-size: 5px;
5
+
6
+ --ax-sys-scroller-size-radius: 3px;
7
+ --ax-sys-scroller-track-color: rgba(var(--ax-sys-color-light-surface));
8
+ --ax-sys-scroller-thumb-color: rgba(var(--ax-sys-color-darkest-surface));
9
+ scrollbar-width: thin;
10
+ scrollbar-color: var(--ax-sys-scroller-thumb-color) var(--ax-sys-scroller-track-color);
11
+ }
12
+
13
+ .ax-dark,
14
+ .ax-dark * {
15
+ --ax-sys-scroller-size: 5px;
5
16
  --ax-sys-scroller-size-radius: 3px;
6
- --ax-sys-scroller-track-color: rgba(var(--ax-sys-color-darkest-surface));
7
- --ax-sys-scroller-thumb-color: rgba(var(--ax-sys-color-primary-surface));
17
+ --ax-sys-scroller-track-color: rgba(var(--ax-sys-color-darker-surface));
18
+ --ax-sys-scroller-thumb-color: rgba(var(--ax-sys-color-lightest-surface));
8
19
  }
9
20
 
10
21
  ::-webkit-scrollbar {
11
- width: var(--ax-sys-scroller-size-width);
22
+ width: var(--ax-sys-scroller-size);
23
+ height: var(--ax-sys-scroller-size);
12
24
  }
13
25
 
14
26
  ::-webkit-scrollbar-track {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@acorex/styles",
3
- "version": "19.10.0-next.12",
3
+ "version": "19.10.0-next.13",
4
4
  "main": "index.js",
5
5
  "author": "Ali Safari",
6
6
  "license": "ISC",
package/tailwind-base.js CHANGED
@@ -1,6 +1,6 @@
1
1
  const plugin = require('tailwindcss/plugin');
2
2
  const { withAnimations } = require('animated-tailwindcss');
3
-
3
+ const { createBorderSurfaces, createOnSurfaces, createPalette, createSurfaces } = require('./generators/index');
4
4
  const childSelector = plugin(function ({ addVariant }) {
5
5
  addVariant('child', '& > *');
6
6
  addVariant('child-hover', '& > *:hover');
@@ -146,58 +146,43 @@ const UTILITY_CLASSES = {
146
146
  '.xl': {
147
147
  '--ax-sys-size-base': '3.5rem',
148
148
  },
149
- };
150
- export const createPalete = function (colorName) {
151
- return {
152
- 50: `rgba(var(--ax-sys-color-${colorName}-50), <alpha-value>)`,
153
- 100: `rgba(var(--ax-sys-color-${colorName}-100), <alpha-value>)`,
154
- 200: `rgba(var(--ax-sys-color-${colorName}-200), <alpha-value>)`,
155
- 300: `rgba(var(--ax-sys-color-${colorName}-300), <alpha-value>)`,
156
- 400: `rgba(var(--ax-sys-color-${colorName}-400), <alpha-value>)`,
157
- 500: `rgba(var(--ax-sys-color-${colorName}-500), <alpha-value>)`,
158
- 600: `rgba(var(--ax-sys-color-${colorName}-600), <alpha-value>)`,
159
- 700: `rgba(var(--ax-sys-color-${colorName}-700), <alpha-value>)`,
160
- 800: `rgba(var(--ax-sys-color-${colorName}-800), <alpha-value>)`,
161
- 900: `rgba(var(--ax-sys-color-${colorName}-900), <alpha-value>)`,
162
- 950: `rgba(var(--ax-sys-color-${colorName}-950), <alpha-value>)`,
163
- };
164
- };
165
- export const createBackgroundPalete = function (colorName) {
166
- return {
167
- lightest: `rgba(var(--ax-sys-color-${colorName}-lightest-surface), <alpha-value>)`,
168
- lighter: `rgba(var(--ax-sys-color-${colorName}-lighter-surface), <alpha-value>)`,
169
- light: `rgba(var(--ax-sys-color-${colorName}-light-surface), <alpha-value>)`,
170
- surface: `rgba(var(--ax-sys-color-${colorName}-surface), <alpha-value>)`,
171
- dark: `rgba(var(--ax-sys-color-${colorName}-dark-surface), <alpha-value>)`,
172
- darker: `rgba(var(--ax-sys-color-${colorName}-darker-surface), <alpha-value>)`,
173
- darkest: `rgba(var(--ax-sys-color-${colorName}-darkest-surface), <alpha-value>)`,
174
- on: `rgba(var(--ax-sys-color-on-${colorName}), <alpha-value>)`,
175
- };
149
+ '.surface': {
150
+ backgroundColor: 'rgb(var(--ax-sys-color-surface))',
151
+ color: 'rgb(var(--ax-sys-color-on-surface))',
152
+ borderColor: 'rgb(var(--ax-sys-color-border-surface))',
153
+ },
154
+ '.lightest': {
155
+ backgroundColor: 'rgb(var(--ax-sys-color-lightest-surface))',
156
+ color: 'rgb(var(--ax-sys-color-on-lightest-surface))',
157
+ borderColor: 'rgb(var(--ax-sys-color-border-lightest-surface))',
158
+ },
159
+ '.lighter': {
160
+ backgroundColor: 'rgb(var(--ax-sys-color-lighter-surface))',
161
+ color: 'rgb(var(--ax-sys-color-on-lighter-surface))',
162
+ borderColor: 'rgb(var(--ax-sys-color-border-lighter-surface))',
163
+ },
164
+ '.light': {
165
+ backgroundColor: 'rgb(var(--ax-sys-color-light-surface))',
166
+ color: 'rgb(var(--ax-sys-color-on-light-surface))',
167
+ borderColor: 'rgb(var(--ax-sys-color-border-light-surface))',
168
+ },
169
+ '.dark': {
170
+ backgroundColor: 'rgb(var(--ax-sys-color-dark-surface))',
171
+ color: 'rgb(var(--ax-sys-color-on-dark-surface))',
172
+ borderColor: 'rgb(var(--ax-sys-color-border-dark-surface))',
173
+ },
174
+ '.darker': {
175
+ backgroundColor: 'rgb(var(--ax-sys-color-darker-surface))',
176
+ color: 'rgb(var(--ax-sys-color-on-darker-surface))',
177
+ borderColor: 'rgb(var(--ax-sys-color-border-darker-surface))',
178
+ },
179
+ '.darkest': {
180
+ backgroundColor: 'rgb(var(--ax-sys-color-darkest-surface))',
181
+ color: 'rgb(var(--ax-sys-color-on-darkest-surface))',
182
+ borderColor: 'rgb(var(--ax-sys-color-border-darkest-surface))',
183
+ },
176
184
  };
177
185
 
178
- export const createOnPalete = function (colorName) {
179
- return {
180
- 'on-lightest': `rgba(var(--ax-sys-color-on-${colorName}-lightest-surface), <alpha-value>)`,
181
- 'on-lighter': `rgba(var(--ax-sys-color-on-${colorName}-lighter-surface), <alpha-value>)`,
182
- 'on-light': `rgba(var(--ax-sys-color-on-${colorName}-light-surface), <alpha-value>)`,
183
- 'on-surface': `rgba(var(--ax-sys-color-on-${colorName}-surface), <alpha-value>)`,
184
- 'on-dark': `rgba(var(--ax-sys-color-on-${colorName}-dark-surface), <alpha-value>)`,
185
- 'on-darker': `rgba(var(--ax-sys-color-on-${colorName}-darker-surface), <alpha-value>)`,
186
- 'on-darkest': `rgba(var(--ax-sys-color-on-${colorName}-darkest-surface), <alpha-value>)`,
187
- 'on-contrast': `rgba(var(--ax-sys-color-on-contrast-${colorName}), <alpha-value>)`,
188
- };
189
- };
190
- export const createBorderPalete = function (colorName) {
191
- return {
192
- lightest: `rgba(var(--ax-sys-color-border-${colorName}-lightest-surface), <alpha-value>)`,
193
- lighter: `rgba(var(--ax-sys-color-border-${colorName}-lighter-surface), <alpha-value>)`,
194
- light: `rgba(var(--ax-sys-color-border-${colorName}-light-surface), <alpha-value>)`,
195
- surface: `rgba(var(--ax-sys-color-border-${colorName}-surface), <alpha-value>)`,
196
- dark: `rgba(var(--ax-sys-color-border-${colorName}-dark-surface), <alpha-value>)`,
197
- darker: `rgba(var(--ax-sys-color-border-${colorName}-darker-surface), <alpha-value>)`,
198
- darkest: `rgba(var(--ax-sys-color-border-${colorName}-darkest-surface), <alpha-value>)`,
199
- };
200
- };
201
186
  module.exports = withAnimations({
202
187
  prefix: 'ax-',
203
188
  content: ['./src/**/*.{html,ts,scss}', './projects/**/*.{html,ts,scss}'],
@@ -215,45 +200,41 @@ module.exports = withAnimations({
215
200
  colors: {
216
201
  ...SURFACE_BG,
217
202
  ...SURFACES_ON,
218
- primary: createPalete('primary'),
219
- secondary: createPalete('secondary'),
220
- success: createPalete('success'),
221
- danger: createPalete('danger'),
222
- warning: createPalete('warning'),
223
- ghost: createPalete('ghost'),
203
+ primary: createPalette('primary'),
204
+ secondary: createPalette('secondary'),
205
+ success: createPalette('success'),
206
+ danger: createPalette('danger'),
207
+ warning: createPalette('warning'),
224
208
  },
225
209
  textColor: {
226
210
  DEFAULT: 'rgba(var(--ax-sys-color-on-lightest-surface), <alpha-value>)',
227
211
  default: 'rgba(var(--ax-sys-color-on-lightest-surface), <alpha-value>)',
228
- primary: createOnPalete('primary'),
229
- secondary: createOnPalete('secondary'),
230
- success: createOnPalete('success'),
231
- danger: createOnPalete('danger'),
232
- warning: createOnPalete('warning'),
233
- ghost: createOnPalete('ghost'),
212
+ primary: createOnSurfaces('primary'),
213
+ secondary: createOnSurfaces('secondary'),
214
+ success: createOnSurfaces('success'),
215
+ danger: createOnSurfaces('danger'),
216
+ warning: createOnSurfaces('warning'),
234
217
  ...SURFACES_ON,
235
218
  },
236
219
  backgroundColor: {
237
220
  DEFAULT: 'rgba(var(--ax-sys-color-lightest-surface), <alpha-value>)',
238
221
  default: 'rgba(var(--ax-sys-color-lightest-surface), <alpha-value>)',
239
- primary: createBackgroundPalete('primary'),
240
- secondary: createBackgroundPalete('secondary'),
241
- success: createBackgroundPalete('success'),
242
- danger: createBackgroundPalete('danger'),
243
- warning: createBackgroundPalete('warning'),
244
- ghost: createBackgroundPalete('ghost'),
222
+ primary: createSurfaces('primary'),
223
+ secondary: createSurfaces('secondary'),
224
+ success: createSurfaces('success'),
225
+ danger: createSurfaces('danger'),
226
+ warning: createSurfaces('warning'),
245
227
  ...SURFACE_BG,
246
228
  ...SURFACES_ON,
247
229
  },
248
230
  borderColor: {
249
231
  DEFAULT: 'rgba(var(--ax-sys-color-border-lightest-surface), <alpha-value>)',
250
232
  default: 'rgba(var(--ax-sys-color-border-lightest-surface), <alpha-value>)',
251
- primary: createBorderPalete('primary'),
252
- secondary: createBorderPalete('secondary'),
253
- success: createBorderPalete('success'),
254
- danger: createBorderPalete('danger'),
255
- warning: createBorderPalete('warning'),
256
- ghost: createBorderPalete('ghost'),
233
+ primary: createBorderSurfaces('primary'),
234
+ secondary: createBorderSurfaces('secondary'),
235
+ success: createBorderSurfaces('success'),
236
+ danger: createBorderSurfaces('danger'),
237
+ warning: createBorderSurfaces('warning'),
257
238
  ...SURFACE_BORDER,
258
239
  },
259
240
  maxWidth: {
package/themes/default.scss CHANGED
@@ -9,6 +9,9 @@ $theme-colors: (
9
9
  oklch(0.645 0.246 16.439),
10
10
  oklch(0.712 0.194 13.428),
11
11
  ),
12
+ 'info': hsl(257, 100%, 50%),
13
+ 'accent1': hsla(77, 100%, 50%, 0.483),
14
+ 'accent2': hsl(48, 100%, 50%),
12
15
  );
13
16
 
14
17
  $theme-surfaces: (