@baloise/ds-styles 0.0.5-nightly.e56f740

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 (117) hide show
  1. package/LICENSE +201 -0
  2. package/README.md +45 -0
  3. package/bin/index.mjs +1333 -0
  4. package/css/all.css +18468 -0
  5. package/css/all.css.map +1 -0
  6. package/css/all.min.css +1 -0
  7. package/css/baloise-design-system.css +18468 -0
  8. package/css/baloise-design-system.css.map +1 -0
  9. package/css/baloise-design-system.min.css +1 -0
  10. package/css/core.css +4423 -0
  11. package/css/core.css.map +1 -0
  12. package/css/core.min.css +1 -0
  13. package/css/font.css +29 -0
  14. package/css/font.css.map +1 -0
  15. package/css/font.min.css +1 -0
  16. package/css/mixins.css +2 -0
  17. package/css/mixins.css.map +1 -0
  18. package/css/mixins.min.css +0 -0
  19. package/css/normalize.css +351 -0
  20. package/css/normalize.css.map +1 -0
  21. package/css/normalize.min.css +1 -0
  22. package/css/structure.css +147 -0
  23. package/css/structure.css.map +1 -0
  24. package/css/structure.min.css +1 -0
  25. package/css/themes/compact.css +30 -0
  26. package/css/themes/compact.css.map +1 -0
  27. package/css/themes/compact.min.css +1 -0
  28. package/css/utilities/all.css +13112 -0
  29. package/css/utilities/all.css.map +1 -0
  30. package/css/utilities/all.min.css +1 -0
  31. package/css/utilities/background.css +1460 -0
  32. package/css/utilities/background.css.map +1 -0
  33. package/css/utilities/background.min.css +1 -0
  34. package/css/utilities/border.css +4697 -0
  35. package/css/utilities/border.css.map +1 -0
  36. package/css/utilities/border.min.css +1 -0
  37. package/css/utilities/elevation.css +317 -0
  38. package/css/utilities/elevation.css.map +1 -0
  39. package/css/utilities/elevation.min.css +1 -0
  40. package/css/utilities/flex.css +969 -0
  41. package/css/utilities/flex.css.map +1 -0
  42. package/css/utilities/flex.min.css +1 -0
  43. package/css/utilities/grid.css +1209 -0
  44. package/css/utilities/grid.css.map +1 -0
  45. package/css/utilities/grid.min.css +1 -0
  46. package/css/utilities/interaction.css +44 -0
  47. package/css/utilities/interaction.css.map +1 -0
  48. package/css/utilities/interaction.min.css +1 -0
  49. package/css/utilities/layout.css +1055 -0
  50. package/css/utilities/layout.css.map +1 -0
  51. package/css/utilities/layout.min.css +1 -0
  52. package/css/utilities/sizing.css +1931 -0
  53. package/css/utilities/sizing.css.map +1 -0
  54. package/css/utilities/sizing.min.css +1 -0
  55. package/css/utilities/spacing.css +1881 -0
  56. package/css/utilities/spacing.css.map +1 -0
  57. package/css/utilities/spacing.min.css +1 -0
  58. package/css/utilities/typography.css +763 -0
  59. package/css/utilities/typography.css.map +1 -0
  60. package/css/utilities/typography.min.css +1 -0
  61. package/package.json +36 -0
  62. package/sass/all.sass +6 -0
  63. package/sass/baloise-design-system.sass +1 -0
  64. package/sass/core.sass +37 -0
  65. package/sass/font.sass +1 -0
  66. package/sass/mixins.sass +3 -0
  67. package/sass/normalize.sass +359 -0
  68. package/sass/structure.sass +113 -0
  69. package/sass/themes/compact.sass +28 -0
  70. package/sass/utilities/all.sass +9 -0
  71. package/sass/utilities/background.sass +5 -0
  72. package/sass/utilities/border.sass +2 -0
  73. package/sass/utilities/elevation.sass +2 -0
  74. package/sass/utilities/flex.sass +2 -0
  75. package/sass/utilities/grid.sass +2 -0
  76. package/sass/utilities/interaction.sass +2 -0
  77. package/sass/utilities/layout.sass +12 -0
  78. package/sass/utilities/sizing.sass +2 -0
  79. package/sass/utilities/spacing.sass +2 -0
  80. package/sass/utilities/typography.sass +127 -0
  81. package/src/core/_all.sass +18 -0
  82. package/src/core/container.sass +23 -0
  83. package/src/core/form/_all.sass +6 -0
  84. package/src/core/form/button.sass +532 -0
  85. package/src/core/form/file.sass +139 -0
  86. package/src/core/form/input-textarea.sass +80 -0
  87. package/src/core/form/select.sass +111 -0
  88. package/src/core/form/shared.sass +69 -0
  89. package/src/core/form/tools.sass +209 -0
  90. package/src/core/grid.sass +477 -0
  91. package/src/core/link.sass +64 -0
  92. package/src/core/list.sass +85 -0
  93. package/src/core/table.sass +134 -0
  94. package/src/core/typography.sass +33 -0
  95. package/src/core/vars/_all.sass +7 -0
  96. package/src/core/vars/button.vars.sass +282 -0
  97. package/src/core/vars/form.vars.sass +137 -0
  98. package/src/core/vars/link.vars.sass +36 -0
  99. package/src/core/vars/list.vars.sass +20 -0
  100. package/src/core/vars/structure.vars.sass +47 -0
  101. package/src/core/vars/table.vars.sass +55 -0
  102. package/src/core/vars/typography.vars.sass +12 -0
  103. package/src/generated/background.sass +1091 -0
  104. package/src/generated/border.sass +3943 -0
  105. package/src/generated/elevation.sass +283 -0
  106. package/src/generated/flex.sass +831 -0
  107. package/src/generated/interaction.sass +26 -0
  108. package/src/generated/layout.sass +948 -0
  109. package/src/generated/sizing.sass +1703 -0
  110. package/src/generated/spacing.sass +1683 -0
  111. package/src/generated/typography.sass +453 -0
  112. package/src/mixins/_all.sass +7 -0
  113. package/src/mixins/bem.mixin.sass +39 -0
  114. package/src/mixins/breakpoint.mixin.sass +67 -0
  115. package/src/mixins/extends.sass +32 -0
  116. package/src/mixins/general.mixin.sass +95 -0
  117. package/src/mixins/svg.mixin.sass +6 -0
package/src/core/vars/structure.vars.sass ADDED
@@ -0,0 +1,47 @@
1
+ /**
2
+ * @prop --bal-body-background: Body background color
3
+ * @prop --bal-body-font-family: Body font family
4
+ * @prop --bal-body-color: Body text color
5
+ * @prop --bal-body-font-weight: Body text weight
6
+ * @prop --bal-body-font-size: Body font size
7
+ * @prop --bal-body-line-height: Body line height
8
+ * @prop --bal-divider-background: Divider background color
9
+ * @prop --bal-focus-shadow-start-color: Focus shadow start color
10
+ * @prop --bal-focus-shadow-end-color: Focus shadow start end
11
+ * @prop --bal-focus-shadow: Focus shadow
12
+ * @prop --bal-focus-shadow-inset: Focus shadow inset
13
+ * @prop --bal-focus-shadow-inverted-start-color: Focus shadow start color
14
+ * @prop --bal-focus-shadow-inverted-end-color: Focus shadow end color
15
+ * @prop --bal-focus-shadow-inverted: Focus shadow on a dark background
16
+ * @prop --bal-focus-shadow-inverted-inset: Focus shadow on a dark background inset
17
+ * @prop --bal-small-font-size: TBD
18
+ * @prop --bal-strong-color: TBD
19
+ * @prop --bal-strong-font-weight: TBD
20
+ */
21
+
22
+ :root
23
+ //
24
+ // body variables
25
+ --bal-body-background: var(--bal-color-text-white)
26
+ --bal-body-font-family: var(--bal-font-family-text)
27
+ --bal-body-color: var(--bal-color-text-primary)
28
+ --bal-body-font-weight: var(--bal-font-weight-regular)
29
+ --bal-body-font-size: 16px
30
+ --bal-body-line-height: var(--bal-line-height-normal)
31
+ --bal-small-font-size: var(--bal-text-size-small)
32
+ --bal-strong-color: var(--bal-color-text-primary)
33
+ --bal-strong-font-weight: var(--bal-font-weight-bold)
34
+ //
35
+ // divider variables
36
+ --bal-divider-background: var(--bal-color-primary-2)
37
+ //
38
+ // focus shadow
39
+ --bal-focus-shadow-start-color: var(--bal-color-white)
40
+ --bal-focus-shadow-end-color: var(--bal-color-purple-6)
41
+ --bal-focus-shadow: var(--bal-focus-shadow-start-color) 0 0 0 2px, var(--bal-focus-shadow-end-color) 0 0 0 5px
42
+ --bal-focus-shadow-inset: inset var(--bal-focus-shadow-end-color) 0 0 0 3px, inset var(--bal-focus-shadow-start-color) 0 0 0 5px
43
+ // inverted
44
+ --bal-focus-shadow-inverted-start-color: var(--bal-color-white)
45
+ --bal-focus-shadow-inverted-end-color: var(--bal-color-yellow)
46
+ --bal-focus-shadow-inverted: var(--bal-focus-shadow-inverted-start-color) 0 0 0 2px, var(--bal-focus-shadow-inverted-end-color) 0 0 0 5px
47
+ --bal-focus-shadow-inverted-inset: inset var(--bal-focus-shadow-inverted-end-color) 0 0 0 3px, inset var(--bal-focus-shadow-inverted-start-color) 0 0 0 5px
package/src/core/vars/table.vars.sass ADDED
@@ -0,0 +1,55 @@
1
+ /**
2
+ * @prop --bal-table-color: Tables default font color
3
+ * @prop --bal-table-background-color: Tables default background color
4
+ * @prop --bal-table-body-background-color: Table body background
5
+ * @prop --bal-table-cell-border: Table cell border
6
+ * @prop --bal-table-cell-border-width: Table cell border width
7
+ * @prop --bal-table-cell-padding: Table cell padding
8
+ * @prop --bal-table-cell-heading-color: Table cell heading color
9
+ * @prop --bal-table-head-cell-border-width: Table head cell border width
10
+ * @prop --bal-table-head-cell-border-color: Table head cell border color
11
+ * @prop --bal-table-head-cell-color: Table head cell color
12
+ * @prop --bal-table-head-background-color: Table head cell background
13
+ * @prop --bal-table-head-font-size: Table head cell font size backgound
14
+ * @prop --bal-table-head-font-family: Table head cell font family
15
+ * @prop --bal-table-foot-cell-border-width: Table foot cell border width
16
+ * @prop --bal-table-foot-cell-color: Table foot cell color
17
+ * @prop --bal-table-foot-background-color: Table foot cell background
18
+ * @prop --bal-table-row-background-color-hover: Table row hover background
19
+ * @prop --bal-table-row-background-color-active: Table row pressed background
20
+ * @prop --bal-table-row-color-active: Table row pressed font color
21
+ * @prop --bal-table-striped-row-even-background-color: Table row striped background
22
+ * @prop --bal-table-striped-row-even-background-color-hover: Table row striped background on hover
23
+ */
24
+
25
+ :root
26
+ --bal-table-color: var(--bal-color-primary)
27
+ --bal-table-background-color: var(--bal-color-white)
28
+ --bal-table-body-background-color: transparent
29
+ //
30
+ // cell
31
+ --bal-table-cell-border-color: var(--bal-color-border)
32
+ --bal-table-cell-border: 2px solid var(--bal-table-cell-border-color)
33
+ --bal-table-cell-border-width: 0 0 2px
34
+ --bal-table-cell-padding: 0.5em 0.75em
35
+ --bal-table-cell-heading-color: var(--bal-color-primary)
36
+ //
37
+ // head
38
+ --bal-table-head-cell-border-width: 0 0 1px
39
+ --bal-table-head-cell-border-color: var(--bal-color-primary)
40
+ --bal-table-head-cell-color: var(--bal-color-primary)
41
+ --bal-table-head-background-color: transparent
42
+ --bal-table-head-font-size: var(--bal-text-size-normal)
43
+ --bal-table-head-font-family: var(--bal-font-family-text)
44
+ //
45
+ // foot
46
+ --bal-table-foot-cell-border-width: 0 0 0
47
+ --bal-table-foot-cell-color: var(--bal-color-primary)
48
+ --bal-table-foot-background-color: transparent
49
+ //
50
+ // row
51
+ --bal-table-row-background-color-hover: var(--bal-color-grey-2)
52
+ --bal-table-row-background-color-active: var(--bal-color-primary-1)
53
+ --bal-table-row-color-active: var(--bal-color-primary)
54
+ --bal-table-striped-row-even-background-color: var(--bal-color-grey-1)
55
+ --bal-table-striped-row-even-background-color-hover: var(--bal-color-grey-2)
package/src/core/vars/typography.vars.sass ADDED
@@ -0,0 +1,12 @@
1
+ /**
2
+ * @prop --bal-title-font-family: Title font family
3
+ * @prop --bal-title-font-weight: Title font weight
4
+ * @prop --bal-subtitle-font-family: Subtitle font family
5
+ * @prop --bal-subtitle-font-weight: Subtitle font weight
6
+ */
7
+
8
+ :root
9
+ --bal-title-font-family: var(--bal-font-family-title)
10
+ --bal-title-font-weight: var(--bal-font-weight-bold)
11
+ --bal-subtitle-font-family: var(--bal-font-family-title)
12
+ --bal-subtitle-font-weight: var(--bal-font-weight-light)