@eleven-labs/design-system 0.23.0 → 0.24.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 (39) hide show
  1. package/dist/components/Atoms/Button/Button.d.ts +3 -3
  2. package/dist/components/Atoms/Typography/Heading/Heading.d.ts +1 -1
  3. package/dist/components/Layout/Flex/Flex.d.ts +2 -2
  4. package/dist/components/Molecules/Cards/ContactCard/ContactCard.d.ts +0 -1
  5. package/dist/constants/systemProps/flexItemSystemProps.d.ts +2 -0
  6. package/dist/constants/systemProps/flexOrGridItemSystemProps.d.ts +2 -0
  7. package/dist/constants/systemProps/flexOrGridSystemProps.d.ts +2 -0
  8. package/dist/constants/systemProps/flexSystemProps.d.ts +2 -0
  9. package/dist/constants/systemProps/index.d.ts +4 -2
  10. package/dist/constants/tokenVariables.d.ts +40 -80
  11. package/dist/helpers/systemPropsHelper/flexItemSystemClassName.d.ts +2 -0
  12. package/dist/helpers/systemPropsHelper/flexOrGridItemSystemClassName.d.ts +2 -0
  13. package/dist/helpers/systemPropsHelper/flexOrGridSystemClassName.d.ts +2 -0
  14. package/dist/helpers/systemPropsHelper/flexSystemClassName.d.ts +2 -0
  15. package/dist/helpers/systemPropsHelper/index.d.ts +4 -2
  16. package/dist/index.es.js +1598 -1635
  17. package/dist/index.umd.cjs +15 -15
  18. package/dist/scss/abstracts/mixins/_component.scss +14 -0
  19. package/dist/scss/abstracts/mixins/_index.scss +2 -0
  20. package/dist/scss/abstracts/mixins/_system_classes.scss +14 -0
  21. package/dist/scss/abstracts/mixins/_utility-classes.scss +10 -4
  22. package/dist/scss/abstracts/variables/_token-variables.scss +25 -49
  23. package/dist/scss/abstracts/variables/_variables.scss +14 -14
  24. package/dist/style.css +1 -1
  25. package/dist/types/SystemProps/FlexItemSystemProps.d.ts +11 -0
  26. package/dist/types/SystemProps/FlexOrGridItemSystemProps.d.ts +8 -0
  27. package/dist/types/SystemProps/FlexOrGridSystemProps.d.ts +27 -0
  28. package/dist/types/SystemProps/FlexSystemProps.d.ts +12 -0
  29. package/dist/types/SystemProps/LayoutSystemProps.d.ts +5 -13
  30. package/dist/types/SystemProps/SystemProps.d.ts +3 -3
  31. package/dist/types/SystemProps/index.d.ts +4 -2
  32. package/dist/types/tokenTypes.d.ts +2 -2
  33. package/package.json +1 -1
  34. package/dist/constants/systemProps/flexBoxSystemProps.d.ts +0 -2
  35. package/dist/constants/systemProps/hiddenSystemProps.d.ts +0 -2
  36. package/dist/helpers/systemPropsHelper/flexBoxSystemClassName.d.ts +0 -2
  37. package/dist/helpers/systemPropsHelper/hiddenSystemClassName.d.ts +0 -2
  38. package/dist/types/SystemProps/FlexBoxSystemProps.d.ts +0 -48
  39. package/dist/types/SystemProps/HiddenSystemProps.d.ts +0 -11
package/dist/scss/abstracts/mixins/_component.scss ADDED
@@ -0,0 +1,14 @@
1
+ @use 'sass:map';
2
+ @use '../variables' as *;
3
+
4
+ @mixin component($component-name, $config) {
5
+ @each $component-variant-name, $properties in $config {
6
+ @if $component-variant-name != 'base' {
7
+ .#{$component-name}-#{$component-variant-name} {
8
+ @each $property-name, $property-value in map.merge(map.get($config, 'base'), $properties) {
9
+ #{$property-name}: #{$property-value};
10
+ }
11
+ }
12
+ }
13
+ }
14
+ }
package/dist/scss/abstracts/mixins/_index.scss CHANGED
@@ -1,2 +1,4 @@
1
1
  @forward 'create-media-queries';
2
2
  @forward 'utility-classes';
3
+ @forward 'system_classes';
4
+ @forward 'component';
package/dist/scss/abstracts/mixins/_system_classes.scss ADDED
@@ -0,0 +1,14 @@
1
+ @use '../functions/map-get-strict' as *;
2
+ @use './utility-classes' as *;
3
+
4
+ @mixin system-classes($prop-list) {
5
+ @each $prop-name, $options in $prop-list {
6
+ @include utility-classes(map-get-strict($options, 'property-css'), map-get-strict($options, 'value-list'), map-get-strict($options, 'prefix-class-name'));
7
+ }
8
+ }
9
+
10
+ @mixin system-classes-with-breakpoints($prop-list) {
11
+ @each $prop-name, $options in $prop-list {
12
+ @include utility-classes-with-breakpoints(map-get-strict($options, 'property-css'), map-get-strict($options, 'value-list'), map-get-strict($options, 'prefix-class-name'));
13
+ }
14
+ }
package/dist/scss/abstracts/mixins/_utility-classes.scss CHANGED
@@ -2,10 +2,11 @@
2
2
  @use './create-media-queries' as *;
3
3
  @use '../variables' as *;
4
4
 
5
- @mixin utility-classes($prefix-class-name, $property-css, $list) {
5
+ @mixin utility-classes($property-css, $list, $prefix-class-name: null) {
6
6
  @each $name, $value in $list {
7
+ $class-name: if($prefix-class-name, #{$prefix-class-name}-#{$name}, #{$name});
7
8
  .#{$prefix-class-name}-#{$name} {
8
- @if type-of($property-css) == 'list' {
9
+ @if type-of($property-css) == 'list' {
9
10
  @each $current-property-css in $property-css {
10
11
  #{$current-property-css}: #{$value};
11
12
  }
@@ -16,11 +17,16 @@
16
17
  }
17
18
  }
18
19
 
19
- @mixin utility-classes-with-modifiers($prefix-class-name, $property-css, $list) {
20
+ @mixin utility-classes-with-breakpoints($property-css, $list, $prefix-class-name: null) {
20
21
  @each $breakpoint-name, $breakpoint-value in map.get($token-variables, 'breakpoint') {
21
22
  @include create-media-queries($breakpoint-name) {
22
23
  @each $name, $value in $list {
23
- .#{$prefix-class-name}-#{$name}\@#{$breakpoint-name} {
24
+ $class-name: if(
25
+ $prefix-class-name,
26
+ #{$prefix-class-name}-#{$name}\@#{$breakpoint-name},
27
+ #{$name}\@#{$breakpoint-name}
28
+ );
29
+ .#{$class-name} {
24
30
  @if type-of($property-css) == 'list' {
25
31
  @each $current-property-css in $property-css {
26
32
  #{$current-property-css}: #{$value};
package/dist/scss/abstracts/variables/_token-variables.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 19 Jan 2024 10:37:41 GMT
3
+ * Generated on Fri, 19 Jan 2024 17:00:47 GMT
4
4
  */
5
5
 
6
6
  $token-variables: (
@@ -9,17 +9,6 @@ $token-variables: (
9
9
  'heading': var(--font-family-heading),
10
10
  'blockquote': var(--font-family-blockquote)
11
11
  ),
12
- 'font-size': (
13
- 'xxs': var(--font-size-xxs),
14
- 'xs': var(--font-size-xs),
15
- 's': var(--font-size-s),
16
- 'm': var(--font-size-m),
17
- 'l': var(--font-size-l),
18
- 'xl': var(--font-size-xl),
19
- 'xxl': var(--font-size-xxl),
20
- 'xxl-2': var(--font-size-xxl-2),
21
- 'xxl-3': var(--font-size-xxl-3)
22
- ),
23
12
  'font-weight': (
24
13
  'regular': var(--font-weight-regular),
25
14
  'medium': var(--font-weight-medium),
@@ -30,11 +19,24 @@ $token-variables: (
30
19
  'heading': (
31
20
  'base': (
32
21
  'font-family': var(--typography-heading-base-font-family),
33
- 'line-height': var(--typography-heading-base-line-height),
34
- 'font-weight': var(--typography-heading-base-font-weight)
22
+ 'line-height': var(--typography-heading-base-line-height)
23
+ ),
24
+ 's': (
25
+ 'font-size': var(--typography-heading-s-font-size),
26
+ 'font-weight': var(--typography-heading-s-font-weight),
27
+ 'text-transform': var(--typography-heading-s-text-transform)
28
+ ),
29
+ 'm': (
30
+ 'font-size': var(--typography-heading-m-font-size),
31
+ 'font-weight': var(--typography-heading-m-font-weight)
32
+ ),
33
+ 'l': (
34
+ 'font-size': var(--typography-heading-l-font-size)
35
35
  ),
36
36
  'xl': (
37
- 'font-weight': var(--typography-heading-xl-font-weight)
37
+ 'font-size': var(--typography-heading-xl-font-size),
38
+ 'font-weight': var(--typography-heading-xl-font-weight),
39
+ 'text-transform': var(--typography-heading-xl-text-transform)
38
40
  )
39
41
  ),
40
42
  'text': (
@@ -42,42 +44,16 @@ $token-variables: (
42
44
  'line-height': var(--typography-text-base-line-height)
43
45
  ),
44
46
  'xs': (
45
- 'line-height': var(--typography-text-xs-line-height)
47
+ 'font-size': var(--typography-text-xs-font-size),
48
+ 'icon-size': var(--typography-text-xs-icon-size)
46
49
  ),
47
- 'm': (
48
- 'line-height': var(--typography-text-m-line-height)
49
- )
50
- )
51
- ),
52
- 'mobile': (
53
- 'typography': (
54
- 'heading': (
55
- 's': (
56
- 'font-size': var(--mobile-typography-heading-s-font-size)
57
- ),
58
- 'm': (
59
- 'font-size': var(--mobile-typography-heading-m-font-size)
60
- ),
61
- 'l': (
62
- 'font-size': var(--mobile-typography-heading-l-font-size)
63
- ),
64
- 'xl': (
65
- 'font-size': var(--mobile-typography-heading-xl-font-size)
66
- )
50
+ 's': (
51
+ 'font-size': var(--typography-text-s-font-size),
52
+ 'icon-size': var(--typography-text-s-icon-size)
67
53
  ),
68
- 'text': (
69
- 'xs': (
70
- 'font-size': var(--mobile-typography-text-xs-font-size),
71
- 'icon-size': var(--mobile-typography-text-xs-icon-size)
72
- ),
73
- 's': (
74
- 'font-size': var(--mobile-typography-text-s-font-size),
75
- 'icon-size': var(--mobile-typography-text-s-icon-size)
76
- ),
77
- 'm': (
78
- 'font-size': var(--mobile-typography-text-m-font-size),
79
- 'icon-size': var(--mobile-typography-text-m-icon-size)
80
- )
54
+ 'm': (
55
+ 'font-size': var(--typography-text-m-font-size),
56
+ 'icon-size': var(--typography-text-m-icon-size)
81
57
  )
82
58
  )
83
59
  ),
package/dist/scss/abstracts/variables/_variables.scss CHANGED
@@ -1,23 +1,23 @@
1
1
 
2
2
  /**
3
3
  * Do not edit directly
4
- * Generated on Fri, 19 Jan 2024 10:37:41 GMT
4
+ * Generated on Fri, 19 Jan 2024 17:00:47 GMT
5
5
  */
6
6
 
7
- $white: #FFF !default;
8
- $black: #000 !default;
9
- $ultra-dark-grey: #333333 !default;
10
- $dark-grey: #757575 !default;
11
- $grey: #9B9B9B !default;
12
- $light-grey: #C4C4C4 !default;
13
- $ultra-light-grey: #EDEDED !default;
14
- $accent: #F8FA9B !default; // A distinct accent color for content.
15
- $info: #DD3156 !default; // Used to provide additional information to the user without conveying any particular level of importance.
16
- $secondary-dark: #C5D3E9 !default;
17
- $secondary: #E9F1F8 !default;
18
- $primary-very-dark: #093670 !default;
19
- $primary-dark: #194180 !default;
20
7
  $primary: #0A4084 !default;
8
+ $primary-dark: #194180 !default;
9
+ $primary-very-dark: #093670 !default;
10
+ $secondary: #E9F1F8 !default;
11
+ $secondary-dark: #C5D3E9 !default;
12
+ $info: #DD3156 !default; // Used to provide additional information to the user without conveying any particular level of importance.
13
+ $accent: #F8FA9B !default; // A distinct accent color for content.
14
+ $ultra-light-grey: #EDEDED !default;
15
+ $light-grey: #C4C4C4 !default;
16
+ $grey: #9B9B9B !default;
17
+ $dark-grey: #757575 !default;
18
+ $ultra-dark-grey: #333333 !default;
19
+ $black: #000 !default;
20
+ $white: #FFF !default;
21
21
 
22
22
  $variables: (
23
23
  'color': (