polaris_view_helpers 0.0.3 → 0.0.4

Sign up to get free protection for your applications and to get access to all the features.
Files changed (79) hide show
  1. checksums.yaml +4 -4
  2. data/lib/polaris_view_helpers/version.rb +1 -1
  3. data/vendor/assets/stylesheets/shopify-polaris-1.0.3.css +3414 -0
  4. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles.scss +4 -0
  5. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components.scss +51 -0
  6. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/AccountConnection.scss +9 -0
  7. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/ActionList.scss +75 -0
  8. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/Avatar.scss +70 -0
  9. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/Badge.scss +68 -0
  10. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/Banner.scss +140 -0
  11. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/Breadcrumbs.scss +45 -0
  12. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/Button.scss +228 -0
  13. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/ButtonGroup.scss +67 -0
  14. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/CalloutCard.scss +27 -0
  15. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/Caption.scss +4 -0
  16. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/Card.scss +43 -0
  17. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/Checkbox.scss +78 -0
  18. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/Choice.scss +62 -0
  19. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/ChoiceList.scss +22 -0
  20. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/Collapsible.scss +18 -0
  21. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/ColorPicker.scss +133 -0
  22. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/Connected.scss +67 -0
  23. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/DatePicker.scss +147 -0
  24. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/DescriptionList.scss +44 -0
  25. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/DisplayText.scss +19 -0
  26. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/EmptyState.scss +63 -0
  27. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/FooterHelp.scss +26 -0
  28. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/FormLayout.scss +35 -0
  29. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/Heading.scss +4 -0
  30. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/Icon.scss +226 -0
  31. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/KeyboardKey.scss +22 -0
  32. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/Label.scss +18 -0
  33. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/Labelled.scss +24 -0
  34. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/Layout.scss +69 -0
  35. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/Link.scss +18 -0
  36. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/List.scss +52 -0
  37. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/Page.scss +125 -0
  38. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/PageActions.scss +9 -0
  39. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/Pagination.scss +139 -0
  40. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/Popover.scss +98 -0
  41. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/PositionedOverlay.scss +8 -0
  42. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/RadioButton.scss +68 -0
  43. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/ResourceList.scss +272 -0
  44. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/Scrollable.scss +28 -0
  45. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/Select.scss +103 -0
  46. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/SettingAction.scss +22 -0
  47. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/Stack.scss +98 -0
  48. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/Subheading.scss +4 -0
  49. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/Tabs.scss +150 -0
  50. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/Tag.scss +37 -0
  51. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/TextContainer.scss +12 -0
  52. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/TextField.scss +219 -0
  53. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/TextStyle.scss +15 -0
  54. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/Thumbnail.scss +49 -0
  55. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/Tooltip.scss +70 -0
  56. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/VisuallyHidden.scss +3 -0
  57. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/foundation.scss +11 -0
  58. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/foundation/border-radius.scss +12 -0
  59. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/foundation/borders.scss +19 -0
  60. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/foundation/colors.scss +142 -0
  61. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/foundation/duration.scss +24 -0
  62. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/foundation/easing.scss +23 -0
  63. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/foundation/layout.scss +46 -0
  64. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/foundation/shadows.scss +25 -0
  65. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/foundation/spacing.scss +25 -0
  66. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/foundation/typography.scss +127 -0
  67. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/foundation/utilities.scss +90 -0
  68. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/foundation/z-index.scss +19 -0
  69. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/global.scss +55 -0
  70. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/shared.scss +8 -0
  71. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/shared/accessibility.scss +16 -0
  72. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/shared/breakpoints.scss +127 -0
  73. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/shared/buttons.scss +87 -0
  74. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/shared/controls.scss +59 -0
  75. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/shared/icons.scss +11 -0
  76. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/shared/layout.scss +8 -0
  77. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/shared/links.scss +8 -0
  78. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/shared/typography.scss +128 -0
  79. metadata +79 -3
@@ -0,0 +1,12 @@
1
+ .Polaris-TextContainer {
2
+ @include text-style-body;
3
+
4
+ p {
5
+ margin: 0;
6
+ }
7
+
8
+ *:not(:last-child) {
9
+ margin: 0;
10
+ margin-bottom: (1.5 * spacing(tight));
11
+ }
12
+ }
@@ -0,0 +1,219 @@
1
+ $backdrop-horizontal-spacing: spacing(tight) * 1.5;
2
+ $addon-horizontal-spacing: 0.25em;
3
+ $spinner-icon-size: rem(12px);
4
+
5
+ $stacking-order: (
6
+ contents: 20,
7
+ backdrop: 10,
8
+ );
9
+
10
+ .Polaris-TextField {
11
+ @include text-style-input;
12
+ position: relative;
13
+ display: flex;
14
+ align-items: baseline;
15
+ padding: 0 $backdrop-horizontal-spacing;
16
+ color: color(ink, lightest);
17
+ }
18
+
19
+ .Polaris-TextField--multiline {
20
+ padding: 0;
21
+
22
+ > .Polaris-TextField__Input {
23
+ overflow: auto;
24
+ padding-left: $backdrop-horizontal-spacing;
25
+ padding-right: $backdrop-horizontal-spacing;
26
+ resize: none;
27
+ }
28
+ }
29
+
30
+ .Polaris-TextField--hasValue {
31
+ color: color(ink);
32
+ }
33
+
34
+ .Polaris-TextField--error {
35
+ .Polaris-TextField__Input::placeholder {
36
+ // This is the only place this color is used.
37
+ // stylelint-disable-next-line color-no-hex
38
+ color: #9c9798;
39
+ }
40
+
41
+ > .Polaris-TextField__Input ~ .Polaris-TextField__Backdrop {
42
+ background-color: color(red, lighter);
43
+ border-color: color(red);
44
+ box-shadow: none;
45
+ }
46
+
47
+ // We need this to override the box-shadow in the focus state.
48
+ // stylelint-disable-next-line selector-max-specificity
49
+ > .Polaris-TextField__Input:focus ~ .Polaris-TextField__Backdrop {
50
+ border-color: color(indigo);
51
+ box-shadow:
52
+ inset shadow(transparent),
53
+ 0 0 0 1px color(indigo);
54
+ }
55
+ }
56
+
57
+ .Polaris-TextField--readOnly > .Polaris-TextField__Backdrop {
58
+ background-color: color(sky, lighter);
59
+ }
60
+
61
+ .Polaris-TextField--disabled > .Polaris-TextField__Backdrop {
62
+ background-color: color(sky, lighter);
63
+ border: border();
64
+ box-shadow: none;
65
+ }
66
+
67
+ .Polaris-TextField__Input {
68
+ @include text-style-input;
69
+ position: relative;
70
+ z-index: z-index(contents, $stacking-order);
71
+ display: block;
72
+ flex: 1 1 0%;
73
+ width: 100%;
74
+ min-height: control-height();
75
+ margin: 0;
76
+ padding: control-vertical-padding() 0;
77
+ background: none;
78
+ border: border(transparent);
79
+ font-family: inherit;
80
+ font-size: inherit;
81
+ font-weight: inherit;
82
+ appearance: none;
83
+
84
+ &:disabled {
85
+ color: color(ink, lightest);
86
+ }
87
+
88
+ &:focus {
89
+ outline: none;
90
+
91
+ ~ .Polaris-TextField__Backdrop {
92
+ border-color: color(indigo);
93
+ box-shadow:
94
+ inset shadow(transparent),
95
+ 0 0 0 1px color(indigo);
96
+ }
97
+ }
98
+
99
+ &::placeholder {
100
+ color: color(ink, lightest);
101
+ }
102
+
103
+ // These properties are used to remove the default "spinner" controls
104
+ // for number fields, since we add our own, custom versions instead.
105
+ &[type='number'] {
106
+ appearance: textfield;
107
+
108
+ &::-webkit-outer-spin-button,
109
+ &::-webkit-inner-spin-button {
110
+ appearance: none;
111
+ margin: 0;
112
+ }
113
+ }
114
+ }
115
+
116
+ .Polaris-TextField__Backdrop {
117
+ position: absolute;
118
+ z-index: z-index(backdrop, $stacking-order);
119
+ top: 0;
120
+ bottom: 0;
121
+ left: 0;
122
+ right: 0;
123
+ background: color(white);
124
+ border: border(dark);
125
+ box-shadow: inset 0 1px 0 0 rgba(color(ink, lighter), 0.05);
126
+ border-radius: border-radius();
127
+ will-change: box-shadow;
128
+ transition: box-shadow duration() easing();
129
+ }
130
+
131
+ .Polaris-TextField__Prefix {
132
+ position: relative;
133
+ z-index: z-index(contents, $stacking-order);
134
+ flex: 0 0 auto;
135
+ margin-right: $addon-horizontal-spacing;
136
+ color: currentColor;
137
+ }
138
+
139
+ .Polaris-TextField__Suffix {
140
+ position: relative;
141
+ z-index: z-index(contents, $stacking-order);
142
+ flex: 0 0 auto;
143
+ margin-left: $addon-horizontal-spacing;
144
+ color: currentColor;
145
+ }
146
+
147
+ .Polaris-TextField__Spinner {
148
+ z-index: z-index(contents, $stacking-order);
149
+ display: flex;
150
+ align-self: stretch;
151
+ flex-direction: column;
152
+ width: rem(22px);
153
+ margin: 1px calc(-#{$backdrop-horizontal-spacing} + 1px) 1px $backdrop-horizontal-spacing;
154
+ color: color(ink);
155
+ }
156
+
157
+ .Polaris-TextField__SpinnerIcon {
158
+ height: $spinner-icon-size;
159
+ width: $spinner-icon-size;
160
+ }
161
+
162
+ .Polaris-TextField__Resizer {
163
+ position: absolute;
164
+ bottom: 0;
165
+ left: 0;
166
+ right: 0;
167
+ height: 0;
168
+ visibility: hidden;
169
+ }
170
+
171
+ .Polaris-TextField__DummyInput {
172
+ @include text-style-input;
173
+ padding: control-vertical-padding() $backdrop-horizontal-spacing;
174
+ border: border(transparent);
175
+
176
+ // We need the following properties in order to have long, unbroken
177
+ // strings wrap in the same way they do in textareas.
178
+ white-space: pre-wrap;
179
+ word-wrap: break-word;
180
+ }
181
+
182
+ .Polaris-TextField__Segment {
183
+ display: flex;
184
+ flex: 1 1 0%;
185
+ justify-content: center;
186
+ align-items: center;
187
+ appearance: none;
188
+ background: linear-gradient(to bottom, color(white), color(sky, lighter));
189
+ border: none;
190
+ border-left: border(dark);
191
+ will-change: background, box-shadow;
192
+ transition:
193
+ background duration(fast) easing(),
194
+ box-shadow duration(fast) easing();
195
+
196
+ &:focus {
197
+ outline: none;
198
+ }
199
+
200
+ &:active {
201
+ background: linear-gradient(to bottom, color(sky, light), color(sky, light));
202
+ box-shadow:
203
+ inset 0 1px 1px 0 rgba(color(ink, lighter), 0.1),
204
+ inset 0 1px 4px 0 rgba(color(ink, lighter), 0.2);
205
+ }
206
+
207
+ &:not(:first-child) {
208
+ margin-top: -1px;
209
+ border-top: border(dark);
210
+ }
211
+
212
+ &:first-child {
213
+ border-top-right-radius: border-radius();
214
+ }
215
+
216
+ &:last-child {
217
+ border-bottom-right-radius: border-radius();
218
+ }
219
+ }
@@ -0,0 +1,15 @@
1
+ .Polaris-TextStyle--variationPositive {
2
+ color: color(green, dark);
3
+ }
4
+
5
+ .Polaris-TextStyle--variationNegative {
6
+ color: color(red, dark);
7
+ }
8
+
9
+ .Polaris-TextStyle--variationStrong {
10
+ @include text-emphasis-strong;
11
+ }
12
+
13
+ .Polaris-TextStyle--variationSubdued {
14
+ @include text-emphasis-subdued;
15
+ }
@@ -0,0 +1,49 @@
1
+ $stacking-order: (
2
+ image: 10,
3
+ shadow: 20,
4
+ );
5
+
6
+ .Polaris-Thumbnail {
7
+ position: relative;
8
+ display: block;
9
+ overflow: hidden;
10
+ background: color(white);
11
+ border-radius: border-radius();
12
+
13
+ &::after {
14
+ content: '';
15
+ position: absolute;
16
+ z-index: z-index(shadow, $stacking-order);
17
+ top: 0;
18
+ bottom: 0;
19
+ left: 0;
20
+ right: 0;
21
+ display: block;
22
+ box-shadow: inset 0 0 0 1px rgba(33, 43, 54, 0.1);
23
+ border-radius: border-radius();
24
+ }
25
+ }
26
+
27
+ .Polaris-Thumbnail--sizeSmall {
28
+ height: rem(40px);
29
+ width: rem(40px);
30
+ }
31
+
32
+ .Polaris-Thumbnail--sizeMedium {
33
+ height: rem(60px);
34
+ width: rem(60px);
35
+ }
36
+
37
+ .Polaris-Thumbnail--sizeLarge {
38
+ height: rem(80px);
39
+ width: rem(80px);
40
+ }
41
+
42
+ .Polaris-Thumbnail__Image {
43
+ position: relative;
44
+ z-index: z-index(image, $stacking-order);
45
+ height: 100%;
46
+ width: 100%;
47
+ max-width: 100%;
48
+ max-height: 100%;
49
+ }
@@ -0,0 +1,70 @@
1
+ $arrow-size: rem(14px);
2
+ $visible-portion-of-arrow: rem(5px);
3
+ $content-max-height: rem(100px);
4
+ $content-max-width: rem(200px);
5
+
6
+ .Polaris-Tooltip {
7
+ margin: $visible-portion-of-arrow spacing() spacing();
8
+ opacity: 1;
9
+ box-shadow: shadow(deep);
10
+ border-radius: border-radius();
11
+ pointer-events: none;
12
+ will-change: opacity, left, top;
13
+ transition: opacity duration() easing(in);
14
+ }
15
+
16
+ .Polaris-Tooltip--measuring {
17
+ opacity: 0;
18
+ }
19
+
20
+ .Polaris-Tooltip--positionedAbove {
21
+ margin: spacing() spacing() $visible-portion-of-arrow;
22
+
23
+ .Polaris-Tooltip__Tip {
24
+ top: inherit;
25
+ bottom: 0;
26
+ }
27
+ }
28
+
29
+ .Polaris-Tooltip--light {
30
+ .Polaris-Tooltip__Wrapper {
31
+ background: color(white);
32
+ color: color(ink);
33
+ }
34
+
35
+ .Polaris-Tooltip__Tip {
36
+ background: color(white);
37
+ }
38
+ }
39
+
40
+ .Polaris-Tooltip__Wrapper {
41
+ position: relative;
42
+ display: flex;
43
+ background-color: color(ink);
44
+ border-radius: border-radius();
45
+ color: color(white);
46
+ max-height: $content-max-height;
47
+ }
48
+
49
+ .Polaris-Tooltip__Content {
50
+ position: relative;
51
+ margin-top: spacing(extra-tight);
52
+ border-radius: border-radius();
53
+ max-width: $content-max-width;
54
+ max-height: $content-max-height;
55
+ }
56
+
57
+ .Polaris-Tooltip__Tip {
58
+ position: absolute;
59
+ top: 0;
60
+ left: 50%;
61
+ transform: translateX(-50%) rotate(45deg);
62
+ height: $arrow-size;
63
+ width: $arrow-size;
64
+ background: color(ink);
65
+ box-shadow: shadow(deep);
66
+ }
67
+
68
+ .Polaris-Tooltip__Label {
69
+ padding: 0 spacing(tight) spacing(extra-tight);
70
+ }
@@ -0,0 +1,3 @@
1
+ .Polaris-VisuallyHidden {
2
+ @include visually-hidden;
3
+ }
@@ -0,0 +1,11 @@
1
+ @import 'foundation/utilities';
2
+ @import 'foundation/colors';
3
+ @import 'foundation/spacing';
4
+ @import 'foundation/borders';
5
+ @import 'foundation/border-radius';
6
+ @import 'foundation/duration';
7
+ @import 'foundation/easing';
8
+ @import 'foundation/layout';
9
+ @import 'foundation/shadows';
10
+ @import 'foundation/typography';
11
+ @import 'foundation/z-index';
@@ -0,0 +1,12 @@
1
+ $border-radius-data: (
2
+ base: 3px,
3
+ large: 6px
4
+ );
5
+
6
+ /// Returns the border radius of the specified size.
7
+ /// @param {String} $size - The border radius's size.
8
+ /// @return {Number} The border radius value.
9
+
10
+ @function border-radius($size: base) {
11
+ @return map-get($border-radius-data, $size);
12
+ }
@@ -0,0 +1,19 @@
1
+ $borders-data: (
2
+ base: 1px solid color(sky),
3
+ dark: 1px solid color(sky, dark),
4
+ transparent: 1px solid transparent
5
+ );
6
+
7
+ /// Returns the default border.
8
+ /// @param {String} $variant [base] - The border variant key.
9
+ /// @return {List} The border value.
10
+
11
+ @function border($variant: base) {
12
+ $fetched-value: map-get($borders-data, $variant);
13
+
14
+ @if $fetched-value {
15
+ @return $fetched-value;
16
+ } @else {
17
+ @error 'Border variant `#{$variant}` not found. Available variants: #{available-names($borders-data)}';
18
+ }
19
+ }
@@ -0,0 +1,142 @@
1
+ // Need to define the raw colors somewhere!
2
+ // stylelint-disable color-no-hex, no-indistinguishable-colors, function-max-empty-lines, value-list-max-empty-lines
3
+ $color-palette-data: (
4
+ white: (
5
+ base: #ffffff
6
+ ),
7
+
8
+ black: (
9
+ base: #000000
10
+ ),
11
+
12
+ sky: (
13
+ lighter: #f9fafb,
14
+ light: #f4f6f8,
15
+ base: #dfe3e8,
16
+ dark: #c4cdd5
17
+ ),
18
+
19
+ ink: (
20
+ lightest: #919eab,
21
+ lighter: #637381,
22
+ light: #454f5b,
23
+ base: #212b36
24
+ ),
25
+
26
+ blue: (
27
+ lighter: #ebf5fa,
28
+ light: #b4e1fa,
29
+ base: #007ace,
30
+ dark: #084e8a,
31
+ darker: #001429,
32
+ text: #3e4e57
33
+ ),
34
+
35
+ green: (
36
+ lighter: #e3f1df,
37
+ light: #bbe5b3,
38
+ base: #50b83c,
39
+ dark: #108043,
40
+ darker: #173630,
41
+ text: #414f3e
42
+ ),
43
+
44
+ yellow: (
45
+ lighter: #fcf1cd,
46
+ light: #ffea8a,
47
+ base: #eec200,
48
+ dark: #9c6f19,
49
+ darker: #573b00,
50
+ text: #595130
51
+ ),
52
+
53
+ orange: (
54
+ lighter: #fcebdb,
55
+ light: #ffc58b,
56
+ base: #f49342,
57
+ dark: #c05717,
58
+ darker: #4a1504,
59
+ text: #594430
60
+ ),
61
+
62
+ red: (
63
+ lighter: #fbeae5,
64
+ light: #fead9a,
65
+ base: #ed6347,
66
+ dark: #bf0711,
67
+ darker: #330101,
68
+ text: #583c35
69
+ ),
70
+
71
+ purple: (
72
+ lighter: #f6f0fd,
73
+ light: #e3d0ff,
74
+ base: #9c6ade,
75
+ dark: #50248f,
76
+ darker: #230051,
77
+ text: #50495a
78
+ ),
79
+
80
+ teal: (
81
+ lighter: #e0f5f5,
82
+ light: #b7ecec,
83
+ base: #47c1bf,
84
+ dark: #00848e,
85
+ darker: #003135,
86
+ text: #405352
87
+ ),
88
+
89
+ indigo: (
90
+ lighter: #f4f5fa,
91
+ light: #b3bcf5,
92
+ base: #5c6ac4,
93
+ dark: #202e78,
94
+ darker: #000639,
95
+ text: #3e4155
96
+ )
97
+ );
98
+
99
+
100
+ /// Returns the color value for a given color name and group.
101
+ ///
102
+ /// @param {String} $hue - The color's hue.
103
+ /// @param {String} $value - The darkness/lightness of the color. Defaults to base.
104
+ /// @param {Color} $for-background - The background color on which this color will
105
+ /// appear. Applies a multiply filter to ensure appropriate contrast.
106
+ /// @return {Color} The color value.
107
+
108
+ @function color($hue, $value: base, $for-background: null) {
109
+ $fetched-color: map-get(map-get($color-palette-data, $hue), $value);
110
+
111
+ @if map-has-key($color-palette-data, $fetched-color) {
112
+ $fetched-color: map-get(map-get($color-palette-data, $fetched-color), $value);
113
+ }
114
+
115
+ @if $for-background != null {
116
+ $fetched-color: color-multiply($fetched-color, $for-background);
117
+ }
118
+
119
+ @if type-of($fetched-color) == color {
120
+ @return $fetched-color;
121
+ } @else {
122
+ @error 'Color `#{$hue} - #{$value}` not found. Available colors: #{available-names($color-palette-data)}';
123
+ }
124
+ }
125
+
126
+
127
+ /// Darkens the foreground color by the background color. This is the same as the
128
+ /// “multiply” filter in graphics apps.
129
+ ///
130
+ /// @param {Color} $foreground - The color to darken.
131
+ /// @param {Color} $background - The background to base darkening on.
132
+ /// @return {Color} The modified color.
133
+
134
+ @function color-multiply($foreground, $background: null) {
135
+ @if $background == null {
136
+ $background: #ffffff;
137
+ }
138
+
139
+ @return $foreground * $background / 255;
140
+ }
141
+
142
+ // stylelint-enable color-no-hex, no-indistinguishable-colors, function-max-empty-lines, value-list-max-empty-lines