@webitel/styleguide 24.12.48 → 24.12.50

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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@webitel/styleguide",
3
- "version": "24.12.48",
3
+ "version": "24.12.50",
4
4
  "main": "",
5
5
  "exports": {
6
6
  ".": "./src/lib/main.scss",
@@ -1,30 +1,30 @@
1
1
  const darkColors = {
2
2
  root: {
3
- background: '{form.field.background}',
4
- checkedBackground: '{primary.color}',
5
- checkedHoverBackground: '{primary.hover.color}',
6
- disabledBackground: '{form.field.disabled.background}',
3
+ background: '{transparent}',
4
+ checkedBackground: '{surface.300}',
5
+ checkedHoverBackground: '{surface.200}',
6
+ disabledBackground: '{surface.650}',
7
7
  filledBackground: '{form.field.filled.background}',
8
- borderColor: '{form.field.border.color}',
9
- hoverBorderColor: '{form.field.hover.border.color}',
10
- focusBorderColor: '{form.field.border.color}',
11
- checkedBorderColor: '{primary.color}',
12
- checkedHoverBorderColor: '{primary.hover.color}',
13
- checkedFocusBorderColor: '{primary.color}',
14
- checkedDisabledBorderColor: '{form.field.border.color}',
8
+ borderColor: '{surface.300}',
9
+ hoverBorderColor: '{surface.200}',
10
+ focusBorderColor: '{focus-color}',
11
+ checkedBorderColor: '{surface.300}',
12
+ checkedHoverBorderColor: '{surface.200}',
13
+ checkedFocusBorderColor: '{focus-color}',
14
+ checkedDisabledBorderColor: '{surface.650}',
15
15
  invalidBorderColor: '{form.field.invalid.border.color}',
16
16
  shadow: '{form.field.shadow}',
17
17
  focusRing: {
18
- color: '{focus.ring.color}',
18
+ color: '{focus-color}',
19
19
  shadow: '{focus.ring.shadow}'
20
20
  },
21
21
  transitionDuration: '{form.field.transition.duration}',
22
22
  },
23
23
  icon: {
24
24
  color: '{form.field.color}',
25
- checkedColor: '{primary.contrast.color}',
26
- checkedHoverColor: '{primary.contrast.color}',
27
- disabledColor: '{form.field.disabled.color}',
25
+ checkedColor: '{surface.800}',
26
+ checkedHoverColor: '{surface.800}',
27
+ disabledColor: '{surface.500}',
28
28
  }
29
29
  }
30
30
 
@@ -1,30 +1,30 @@
1
1
  const lightColors = {
2
2
  root: {
3
- background: '{form.field.background}',
4
- checkedBackground: '{primary.color}',
5
- checkedHoverBackground: '{primary.hover.color}',
6
- disabledBackground: '{form.field.disabled.background}',
3
+ background: '{transparent}',
4
+ checkedBackground: '{surface.700}',
5
+ checkedHoverBackground: '{surface.600}',
6
+ disabledBackground: '{surface.200}',
7
7
  filledBackground: '{form.field.filled.background}',
8
- borderColor: '{form.field.border.color}',
9
- hoverBorderColor: '{form.field.hover.border.color}',
10
- focusBorderColor: '{form.field.border.color}',
11
- checkedBorderColor: '{primary.color}',
12
- checkedHoverBorderColor: '{primary.hover.color}',
13
- checkedFocusBorderColor: '{primary.color}',
14
- checkedDisabledBorderColor: '{form.field.border.color}',
8
+ borderColor: '{surface.700}',
9
+ hoverBorderColor: '{surface.600}',
10
+ focusBorderColor: '{focus-color}',
11
+ checkedBorderColor: '{surface.700}',
12
+ checkedHoverBorderColor: '{surface.600}',
13
+ checkedFocusBorderColor: '{focus-color}',
14
+ checkedDisabledBorderColor: '{surface.200}',
15
15
  invalidBorderColor: '{form.field.invalid.border.color}',
16
16
  shadow: '{form.field.shadow}',
17
17
  focusRing: {
18
- color: '{focus.ring.color}',
19
- shadow: '{focus.ring.shadow}'
18
+ color: '{focus-color}',
19
+ shadow: '{focus.ring.shadow}'
20
20
  },
21
21
  transitionDuration: '{form.field.transition.duration}',
22
22
  },
23
23
  icon: {
24
24
  color: '{form.field.color}',
25
- checkedColor: '{primary.contrast.color}',
26
- checkedHoverColor: '{primary.contrast.color}',
27
- disabledColor: '{form.field.disabled.color}',
25
+ checkedColor: '{surface.0}',
26
+ checkedHoverColor: '{surface.0}',
27
+ disabledColor: '{surface.400}',
28
28
  }
29
29
  }
30
30
 
@@ -1,15 +1,17 @@
1
1
  const sizes = {
2
2
  root: {
3
3
  borderRadius: '{border.radius.sm}',
4
- width: '1.25rem',
5
- height: '1.25rem',
4
+ width: '1.125rem',
5
+ height: '1.125rem',
6
+ wrapperWidth: '1.5rem',
7
+ wrapperHeight: '1.5rem',
6
8
  sm: {
7
9
  width: '1rem',
8
10
  height: '1rem'
9
11
  },
10
12
  lg: {
11
- width: '1.5rem',
12
- height: '1.5rem'
13
+ width: '1.10rem',
14
+ height: '1.10rem'
13
15
  },
14
16
  focusRing: {
15
17
  width: '{focus.ring.width}',
@@ -18,7 +20,7 @@ const sizes = {
18
20
  }
19
21
  },
20
22
  icon: {
21
- size: '0.875rem',
23
+ size: '0.75rem',
22
24
  sm: {
23
25
  size: '0.75rem'
24
26
  },
@@ -1,16 +1,24 @@
1
1
  export default {
2
2
  surface: {
3
- 0: '#ffffff',
4
- 50: '{zinc.50}',
5
- 100: '{zinc.100}',
6
- 200: '{zinc.200}',
7
- 300: '{zinc.300}',
8
- 400: '{zinc.400}',
9
- 500: '{zinc.500}',
10
- 600: '{zinc.600}',
11
- 700: '{zinc.700}',
12
- 800: '{zinc.800}',
13
- 900: '{zinc.900}',
14
- 950: '{zinc.950}'
3
+ 0: '{gray.0}',
4
+ 50: '{gray.50}',
5
+ 100: '{gray.100}',
6
+ 150: '{gray.150}',
7
+ 200: '{gray.200}',
8
+ 250: '{gray.250}',
9
+ 300: '{gray.300}',
10
+ 350: '{gray.350}',
11
+ 400: '{gray.400}',
12
+ 450: '{gray.450}',
13
+ 500: '{gray.500}',
14
+ 550: '{gray.550}',
15
+ 600: '{gray.600}',
16
+ 650: '{gray.650}',
17
+ 700: '{gray.700}',
18
+ 750: '{gray.750}',
19
+ 800: '{gray.800}',
20
+ 850: '{gray.850}',
21
+ 900: '{gray.900}',
22
+ 950: '{gray.950}'
15
23
  }
16
24
  }
@@ -1,16 +1,24 @@
1
1
  export default {
2
2
  surface: {
3
- 0: '#ffffff',
4
- 50: '{slate.50}',
5
- 100: '{slate.100}',
6
- 200: '{slate.200}',
7
- 300: '{slate.300}',
8
- 400: '{slate.400}',
9
- 500: '{slate.500}',
10
- 600: '{slate.600}',
11
- 700: '{slate.700}',
12
- 800: '{slate.800}',
13
- 900: '{slate.900}',
14
- 950: '{slate.950}'
3
+ 0: '{gray.0}',
4
+ 50: '{gray.50}',
5
+ 100: '{gray.100}',
6
+ 150: '{gray.150}',
7
+ 200: '{gray.200}',
8
+ 250: '{gray.250}',
9
+ 300: '{gray.300}',
10
+ 350: '{gray.350}',
11
+ 400: '{gray.400}',
12
+ 450: '{gray.450}',
13
+ 500: '{gray.500}',
14
+ 550: '{gray.550}',
15
+ 600: '{gray.600}',
16
+ 650: '{gray.650}',
17
+ 700: '{gray.700}',
18
+ 750: '{gray.750}',
19
+ 800: '{gray.800}',
20
+ 850: '{gray.850}',
21
+ 900: '{gray.900}',
22
+ 950: '{gray.950}'
15
23
  }
16
24
  }