@graupl/graupl 1.0.0-alpha.11 → 1.0.0-alpha.12

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 (151) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/dist/base/button.css +2 -0
  3. package/dist/base/button.css.map +1 -0
  4. package/dist/base/form.css.map +1 -1
  5. package/dist/base/link.css +1 -1
  6. package/dist/base/link.css.map +1 -1
  7. package/dist/base/table.css +1 -1
  8. package/dist/base/table.css.map +1 -1
  9. package/dist/base.css +1 -1
  10. package/dist/base.css.map +1 -1
  11. package/dist/component/input-group.css.map +1 -1
  12. package/dist/component.css +1 -1
  13. package/dist/component.css.map +1 -1
  14. package/dist/graupl.css +1 -1
  15. package/dist/graupl.css.map +1 -1
  16. package/dist/init.css +2 -0
  17. package/dist/init.css.map +1 -0
  18. package/dist/layout/columns.css.map +1 -1
  19. package/dist/layout/container.css.map +1 -1
  20. package/dist/layout.css +1 -1
  21. package/dist/layout.css.map +1 -1
  22. package/dist/normalize.css +2 -0
  23. package/dist/normalize.css.map +1 -0
  24. package/dist/state/focus.css.map +1 -1
  25. package/dist/state.css.map +1 -1
  26. package/dist/theme/color.css.map +1 -1
  27. package/dist/theme/typography.css.map +1 -1
  28. package/dist/theme.css.map +1 -1
  29. package/dist/utilities/spacing.css +1 -1
  30. package/dist/utilities/spacing.css.map +1 -1
  31. package/dist/utilities.css +1 -1
  32. package/dist/utilities.css.map +1 -1
  33. package/index.html +6 -7
  34. package/package.json +2 -1
  35. package/scss/base/button.scss +3 -0
  36. package/scss/base/form.scss +1 -1
  37. package/scss/base/link.scss +1 -1
  38. package/scss/base/table.scss +1 -1
  39. package/scss/base.scss +1 -1
  40. package/scss/component/input-group.scss +1 -1
  41. package/scss/component.scss +1 -1
  42. package/scss/graupl.scss +1 -3
  43. package/scss/init.scss +3 -0
  44. package/scss/layout/columns.scss +1 -1
  45. package/scss/layout/container.scss +1 -1
  46. package/scss/layout.scss +1 -1
  47. package/scss/normalize.scss +3 -0
  48. package/scss/state/focus.scss +1 -1
  49. package/scss/state.scss +1 -1
  50. package/scss/theme/color.scss +1 -1
  51. package/scss/theme/typography.scss +1 -1
  52. package/scss/theme.scss +1 -1
  53. package/scss/utilities/alignment.scss +1 -1
  54. package/scss/utilities/color.scss +1 -1
  55. package/scss/utilities/display.scss +1 -1
  56. package/scss/utilities/flex.scss +1 -1
  57. package/scss/utilities/inset.scss +1 -1
  58. package/scss/utilities/justification.scss +1 -1
  59. package/scss/utilities/list.scss +1 -1
  60. package/scss/utilities/postion.scss +1 -1
  61. package/scss/utilities/spacing.scss +1 -1
  62. package/scss/utilities/typography.scss +1 -1
  63. package/scss/utilities/visibility.scss +1 -1
  64. package/scss/utilities.scss +1 -1
  65. package/src/scss/_defaults.scss +6 -4
  66. package/src/scss/_index.scss +4 -3
  67. package/src/scss/_init.scss +2 -2
  68. package/src/scss/_normalize.scss +197 -0
  69. package/src/scss/_variables.scss +4 -1
  70. package/src/scss/base/_index.scss +2 -1
  71. package/src/scss/{component → base}/button/_defaults.scss +14 -5
  72. package/src/scss/{component → base}/button/_index.scss +40 -27
  73. package/src/scss/{component → base}/button/_variables.scss +8 -1
  74. package/src/scss/base/form/_defaults.scss +14 -4
  75. package/src/scss/base/form/_index.scss +21 -16
  76. package/src/scss/base/form/_variables.scss +4 -1
  77. package/src/scss/base/link/_defaults.scss +16 -4
  78. package/src/scss/base/link/_index.scss +31 -7
  79. package/src/scss/base/link/_variables.scss +65 -1
  80. package/src/scss/base/table/_defaults.scss +49 -4
  81. package/src/scss/base/table/_index.scss +104 -8
  82. package/src/scss/base/table/_variables.scss +63 -1
  83. package/src/scss/component/_index.scss +1 -3
  84. package/src/scss/component/input-group/_defaults.scss +11 -4
  85. package/src/scss/component/input-group/_index.scss +11 -9
  86. package/src/scss/component/input-group/_variables.scss +4 -1
  87. package/src/scss/functions/_important.scss +2 -0
  88. package/src/scss/functions/_theme.scss +2 -0
  89. package/src/scss/layout/_index.scss +1 -1
  90. package/src/scss/layout/columns/_defaults.scss +12 -4
  91. package/src/scss/layout/columns/_index.scss +5 -5
  92. package/src/scss/layout/columns/_variables.scss +4 -1
  93. package/src/scss/layout/container/_defaults.scss +13 -4
  94. package/src/scss/layout/container/_index.scss +12 -7
  95. package/src/scss/layout/container/_variables.scss +4 -1
  96. package/src/scss/mixins/_layer.scss +1 -1
  97. package/src/scss/mixins/_media-queries.scss +2 -1
  98. package/src/scss/state/_index.scss +1 -1
  99. package/src/scss/state/focus/_defaults.scss +6 -4
  100. package/src/scss/state/focus/_index.scss +1 -1
  101. package/src/scss/state/focus/_variables.scss +4 -1
  102. package/src/scss/theme/_index.scss +1 -1
  103. package/src/scss/theme/color/_defaults.scss +6 -4
  104. package/src/scss/theme/color/_index.scss +1 -1
  105. package/src/scss/theme/color/_variables.scss +4 -1
  106. package/src/scss/theme/typography/_defaults.scss +6 -4
  107. package/src/scss/theme/typography/_index.scss +1 -1
  108. package/src/scss/theme/typography/_variables.scss +4 -1
  109. package/src/scss/utilities/_index.scss +1 -1
  110. package/src/scss/utilities/alignment/_defaults.scss +6 -4
  111. package/src/scss/utilities/alignment/_index.scss +1 -1
  112. package/src/scss/utilities/alignment/_variables.scss +4 -1
  113. package/src/scss/utilities/color/_defaults.scss +6 -4
  114. package/src/scss/utilities/color/_index.scss +1 -1
  115. package/src/scss/utilities/color/_variables.scss +4 -1
  116. package/src/scss/utilities/display/_defaults.scss +6 -4
  117. package/src/scss/utilities/display/_index.scss +1 -1
  118. package/src/scss/utilities/display/_variables.scss +4 -1
  119. package/src/scss/utilities/flex/_defaults.scss +6 -4
  120. package/src/scss/utilities/flex/_index.scss +1 -1
  121. package/src/scss/utilities/flex/_variables.scss +4 -1
  122. package/src/scss/utilities/inset/_defaults.scss +6 -4
  123. package/src/scss/utilities/inset/_index.scss +1 -1
  124. package/src/scss/utilities/inset/_variables.scss +4 -1
  125. package/src/scss/utilities/justification/_defaults.scss +6 -4
  126. package/src/scss/utilities/justification/_index.scss +1 -1
  127. package/src/scss/utilities/justification/_variables.scss +4 -1
  128. package/src/scss/utilities/list/_defaults.scss +6 -4
  129. package/src/scss/utilities/list/_index.scss +1 -1
  130. package/src/scss/utilities/list/_variables.scss +4 -1
  131. package/src/scss/utilities/position/_defaults.scss +6 -4
  132. package/src/scss/utilities/position/_index.scss +1 -1
  133. package/src/scss/utilities/position/_variables.scss +4 -1
  134. package/src/scss/utilities/spacing/_defaults.scss +6 -4
  135. package/src/scss/utilities/spacing/_index.scss +8 -1
  136. package/src/scss/utilities/spacing/_variables.scss +4 -1
  137. package/src/scss/utilities/typography/_defaults.scss +6 -4
  138. package/src/scss/utilities/typography/_index.scss +1 -1
  139. package/src/scss/utilities/typography/_variables.scss +4 -1
  140. package/src/scss/utilities/visibility/_defaults.scss +6 -4
  141. package/src/scss/utilities/visibility/_index.scss +1 -1
  142. package/src/scss/utilities/visibility/_variables.scss +4 -1
  143. package/dist/component/button.css +0 -2
  144. package/dist/component/button.css.map +0 -1
  145. package/dist/component/table.css +0 -2
  146. package/dist/component/table.css.map +0 -1
  147. package/scss/component/button.scss +0 -3
  148. package/scss/component/table.scss +0 -3
  149. package/src/scss/component/table/_defaults.scss +0 -30
  150. package/src/scss/component/table/_index.scss +0 -77
  151. package/src/scss/component/table/_variables.scss +0 -64
@@ -1,2 +0,0 @@
1
- @layer graupl.component{table .primary,table.primary{--graupl-table-header-background:var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)));--graupl-table-header-color:var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)));--graupl-table-striped-background:var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa)));--graupl-table-striped-color:var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)));--graupl-table-hover-background:var(--graupl-theme-active--primary--300,var(--graupl-theme-light--primary--300,var(--graupl-primary--300,#5e90ed)));--graupl-table-hover-color:var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)));--graupl-table-border-color:var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)));--graupl-table-highlight-background:var(--graupl-theme-active--primary--500,var(--graupl-theme-light--primary--500,var(--graupl-primary--500,#2063df)));--graupl-table-highlight-color:var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))}table .secondary,table.secondary{--graupl-table-header-background:var(--graupl-theme-active--secondary--700,var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b)));--graupl-table-header-color:var(--graupl-theme-active--secondary--100,var(--graupl-theme-light--secondary--100,var(--graupl-secondary--100,#edeef7)));--graupl-table-striped-background:var(--graupl-theme-active--secondary--200,var(--graupl-theme-light--secondary--200,var(--graupl-secondary--200,#bdbfdb)));--graupl-table-striped-color:var(--graupl-theme-active--secondary--900,var(--graupl-theme-light--secondary--900,var(--graupl-secondary--900,#0f1124)));--graupl-table-hover-background:var(--graupl-theme-active--secondary--300,var(--graupl-theme-light--secondary--300,var(--graupl-secondary--300,#9497b8)));--graupl-table-hover-color:var(--graupl-theme-active--secondary--900,var(--graupl-theme-light--secondary--900,var(--graupl-secondary--900,#0f1124)));--graupl-table-border-color:var(--graupl-theme-active--secondary--900,var(--graupl-theme-light--secondary--900,var(--graupl-secondary--900,#0f1124)));--graupl-table-highlight-background:var(--graupl-theme-active--secondary--500,var(--graupl-theme-light--secondary--500,var(--graupl-secondary--500,#6c7093)));--graupl-table-highlight-color:var(--graupl-theme-active--secondary--100,var(--graupl-theme-light--secondary--100,var(--graupl-secondary--100,#edeef7)))}table .tertiary,table.tertiary{--graupl-table-header-background:var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46)));--graupl-table-header-color:var(--graupl-theme-active--tertiary--100,var(--graupl-theme-light--tertiary--100,var(--graupl-tertiary--100,#fde7ef)));--graupl-table-striped-background:var(--graupl-theme-active--tertiary--200,var(--graupl-theme-light--tertiary--200,var(--graupl-tertiary--200,#f2a6bf)));--graupl-table-striped-color:var(--graupl-theme-active--tertiary--900,var(--graupl-theme-light--tertiary--900,var(--graupl-tertiary--900,#2f0412)));--graupl-table-hover-background:var(--graupl-theme-active--tertiary--300,var(--graupl-theme-light--tertiary--300,var(--graupl-tertiary--300,#e06c92)));--graupl-table-hover-color:var(--graupl-theme-active--tertiary--900,var(--graupl-theme-light--tertiary--900,var(--graupl-tertiary--900,#2f0412)));--graupl-table-border-color:var(--graupl-theme-active--tertiary--900,var(--graupl-theme-light--tertiary--900,var(--graupl-tertiary--900,#2f0412)));--graupl-table-highlight-background:var(--graupl-theme-active--tertiary--500,var(--graupl-theme-light--tertiary--500,var(--graupl-tertiary--500,#c36)));--graupl-table-highlight-color:var(--graupl-theme-active--tertiary--100,var(--graupl-theme-light--tertiary--100,var(--graupl-tertiary--100,#fde7ef)))}table.bordered{border-collapse:collapse;border-color:var(--graupl-table-border-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))));border-style:var(--graupl-table-border-style,var(--graupl-border-style,solid));border-width:var(--graupl-table-border-width,var(--graupl-border-width,2px))}table.bordered tr>*{border-color:var(--graupl-table-cell-border-color,var(--graupl-table-border-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))));border-style:var(--graupl-table-cell-border-style,var(--graupl-table-border-style,var(--graupl-border-style,solid)));border-width:var(--graupl-table-cell-border-width,var(--graupl-table-border-width,var(--graupl-border-width,2px)))}table.striped-columns tbody tr:nth-child(odd)>*,table.striped-rows tbody tr>:nth-child(odd){background:var(--graupl-table-striped-background,var(--graupl-theme-active--secondary--200,var(--graupl-theme-light--secondary--200,var(--graupl-secondary--200,#bdbfdb))));color:var(--graupl-table-striped-color,var(--graupl-theme-active--secondary--900,var(--graupl-theme-light--secondary--900,var(--graupl-secondary--900,#0f1124))))}table.hoverable tbody tr:hover>*{background:var(--graupl-table-hover-background,var(--graupl-theme-active--secondary--300,var(--graupl-theme-light--secondary--300,var(--graupl-secondary--300,#9497b8))));color:var(--graupl-table-hover-color,var(--graupl-theme-active--secondary--900,var(--graupl-theme-light--secondary--900,var(--graupl-secondary--900,#0f1124))))}table .highlight{--graupl-table-cell-background:var(--graupl-table-highlight-background,var(--graupl-theme-active--secondary--500,var(--graupl-theme-light--secondary--500,var(--graupl-secondary--500,#6c7093))));--graupl-table-cell-color:var(--graupl-table-highlight-color,var(--graupl-theme-active--secondary--100,var(--graupl-theme-light--secondary--100,var(--graupl-secondary--100,#edeef7))));--graupl-table-header-background:var(--graupl-table-highlight-background,var(--graupl-theme-active--secondary--500,var(--graupl-theme-light--secondary--500,var(--graupl-secondary--500,#6c7093))));--graupl-table-header-color:var(--graupl-table-highlight-color,var(--graupl-theme-active--secondary--100,var(--graupl-theme-light--secondary--100,var(--graupl-secondary--100,#edeef7))));--graupl-table-striped-background:var(--graupl-table-highlight-background,var(--graupl-theme-active--secondary--500,var(--graupl-theme-light--secondary--500,var(--graupl-secondary--500,#6c7093))));--graupl-table-striped-color:var(--graupl-table-highlight-color,var(--graupl-theme-active--secondary--100,var(--graupl-theme-light--secondary--100,var(--graupl-secondary--100,#edeef7))))}.responsive-table{display:block;overflow:scroll hidden;width:100%}.responsive-table table{margin-bottom:0;width:100%}}
2
- /*# sourceMappingURL=table.css.map */
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/scss/mixins/_layer.scss","../../src/scss/component/table/_index.scss","table.css","../../src/scss/component/table/_variables.scss"],"names":[],"mappings":"AASI,wBCEE,6BAGI,oJAAA,CAAA,+IAAA,CAAA,qJAAA,CAAA,gJAAA,CAAA,mJAAA,CAAA,8IAAA,CAAA,+IAAA,CAAA,uJAAA,CAAA,kJCFR,CDDI,iCAGI,0JAAA,CAAA,qJAAA,CAAA,2JAAA,CAAA,sJAAA,CAAA,yJAAA,CAAA,oJAAA,CAAA,qJAAA,CAAA,6JAAA,CAAA,wJCUR,CDbI,+BAGI,uJAAA,CAAA,kJAAA,CAAA,wJAAA,CAAA,mJAAA,CAAA,sJAAA,CAAA,iJAAA,CAAA,kJAAA,CAAA,uJAAA,CAAA,qJCsBR,CDdE,eACE,wBAAA,CAGA,iKEVe,CFSf,8EEbe,CFYf,4ECkBJ,CDdI,oBAGE,uMEDkB,CFAlB,oHEJkB,CFGlB,kHCkBN,CDJI,4FACE,2KERmB,CFSnB,iKCUN,CDLI,iCACE,yKELiB,CFMjB,+JCON,CDHE,iBACE,iMAAA,CACA,uLAAA,CACA,mMAAA,CACA,yLAAA,CACA,oMAAA,CACA,0LCKJ,CDDA,kBACE,aAAA,CAEA,sBAAA,CADA,UCIF,CDDE,wBAEE,eAAA,CADA,UCIJ,CACF","file":"table.css"}
@@ -1,3 +0,0 @@
1
- // Graupl Button Component.
2
-
3
- @forward "../../src/scss/component/button";
@@ -1,3 +0,0 @@
1
- // Table component styles.
2
-
3
- @forward "../../src/scss/component/table";
@@ -1,30 +0,0 @@
1
- // Default values for Graupl.
2
- //
3
- // Generally, these should not be used directly when styling components.
4
- // They are mainly used to provide default fallbacks for custom properties
5
- // which can be found in the `variables.scss` file.
6
-
7
- @use "sass:map";
8
-
9
- // Table theme defaults.
10
- // This map is used to define the default colour shades for the
11
- // themed table components.
12
- //
13
- // e.g.
14
- // Primary tables will use primary--700 as the header background,
15
- // and primary--100 as the header text colour.
16
- //
17
- // Secondary/tertiary tables will use the same shade for their respective colours.
18
- $base-table-theme-map: (
19
- header-background: 700,
20
- header-color: 100,
21
- striped-background: 200,
22
- striped-color: 900,
23
- hover-background: 300,
24
- hover-color: 900,
25
- border-color: 900,
26
- highlight-background: 500,
27
- highlight-color: 100,
28
- );
29
- $custom-table-theme-map: () !default;
30
- $table-theme-map: map.merge($base-table-theme-map, $custom-table-theme-map);
@@ -1,77 +0,0 @@
1
- // Table component styles.
2
-
3
- @use "variables" as *;
4
- @use "defaults";
5
- @use "../../mixins/layer" as *;
6
- @use "../../defaults" as root-defaults;
7
- @use "../../functions/theme";
8
-
9
- @include layer(component) {
10
- table {
11
- @each $variant in theme.variants() {
12
- &.#{$variant},
13
- .#{$variant} {
14
- @each $prop, $key in defaults.$table-theme-map {
15
- --#{root-defaults.$prefix}-table-#{$prop}: #{theme.get(
16
- $variant,
17
- $key
18
- )};
19
- }
20
- }
21
- }
22
-
23
- &.bordered {
24
- border-collapse: collapse;
25
- border-width: $table-border-width;
26
- border-style: $table-border-style;
27
- border-color: $table-border-color;
28
-
29
- tr > * {
30
- border-width: $table-cell-border-width;
31
- border-style: $table-cell-border-style;
32
- border-color: $table-cell-border-color;
33
- }
34
- }
35
-
36
- &.striped-columns {
37
- tbody tr:nth-child(odd) > * {
38
- background: $table-striped-background;
39
- color: $table-striped-color;
40
- }
41
- }
42
-
43
- &.striped-rows {
44
- tbody tr > :nth-child(odd) {
45
- background: $table-striped-background;
46
- color: $table-striped-color;
47
- }
48
- }
49
-
50
- &.hoverable {
51
- tbody tr:hover > * {
52
- background: $table-hover-background;
53
- color: $table-hover-color;
54
- }
55
- }
56
-
57
- .highlight {
58
- --#{root-defaults.$prefix}-table-cell-background: #{$table-highlight-background};
59
- --#{root-defaults.$prefix}-table-cell-color: #{$table-highlight-color};
60
- --#{root-defaults.$prefix}-table-header-background: #{$table-highlight-background};
61
- --#{root-defaults.$prefix}-table-header-color: #{$table-highlight-color};
62
- --#{root-defaults.$prefix}-table-striped-background: #{$table-highlight-background};
63
- --#{root-defaults.$prefix}-table-striped-color: #{$table-highlight-color};
64
- }
65
- }
66
-
67
- .responsive-table {
68
- display: block;
69
- width: 100%;
70
- overflow: scroll hidden;
71
-
72
- table {
73
- width: 100%;
74
- margin-bottom: 0;
75
- }
76
- }
77
- }
@@ -1,64 +0,0 @@
1
- // Variables referencing custom properties.
2
-
3
- @use "defaults";
4
- @use "../../defaults" as root-defaults;
5
- @use "../../variables" as root-variables;
6
- @use "../../functions/theme";
7
-
8
- // Table border properties.
9
- $table-border-width: var(
10
- --#{root-defaults.$prefix}-table-border-width,
11
- #{root-variables.$border-width}
12
- );
13
- $table-border-style: var(
14
- --#{root-defaults.$prefix}-table-border-style,
15
- #{root-variables.$border-style}
16
- );
17
- $table-border-color: var(
18
- --#{root-defaults.$prefix}-table-border-color,
19
- #{theme.get(primary, 900)}
20
- );
21
-
22
- // Table cell border properties.
23
- $table-cell-border-width: var(
24
- --#{root-defaults.$prefix}-table-cell-border-width,
25
- #{$table-border-width}
26
- );
27
- $table-cell-border-style: var(
28
- --#{root-defaults.$prefix}-table-cell-border-style,
29
- #{$table-border-style}
30
- );
31
- $table-cell-border-color: var(
32
- --#{root-defaults.$prefix}-table-cell-border-color,
33
- #{$table-border-color}
34
- );
35
-
36
- // Table striped properties.
37
- $table-striped-background: var(
38
- --#{root-defaults.$prefix}-table-striped-background,
39
- #{theme.get(secondary, 200)}
40
- );
41
- $table-striped-color: var(
42
- --#{root-defaults.$prefix}-table-striped-color,
43
- #{theme.get(secondary, 900)}
44
- );
45
-
46
- // Table hover properties.
47
- $table-hover-background: var(
48
- --#{root-defaults.$prefix}-table-hover-background,
49
- #{theme.get(secondary, 300)}
50
- );
51
- $table-hover-color: var(
52
- --#{root-defaults.$prefix}-table-hover-color,
53
- #{theme.get(secondary, 900)}
54
- );
55
-
56
- // Table highlight properties.
57
- $table-highlight-background: var(
58
- --#{root-defaults.$prefix}-table-highlight-background,
59
- #{theme.get(secondary, 500)}
60
- );
61
- $table-highlight-color: var(
62
- --#{root-defaults.$prefix}-table-highlight-color,
63
- #{theme.get(secondary, 100)}
64
- );