@justeattakeaway/pie-css 0.26.2 → 0.28.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.
- package/README.md +14 -2
- package/dist/components/radio.css +151 -0
- package/dist/index.css +10 -0
- package/package.json +3 -3
- package/scss/_internal/radio.scss +12 -0
- package/scss/mixins/components/_radio.scss +195 -0
- package/scss/mixins/components/index.scss +1 -0
- package/scss/mixins/index.scss +1 -0
package/README.md
CHANGED
|
@@ -29,12 +29,14 @@ The PIE design tokens (and HSL colour variants) are exposed as CSS variables, as
|
|
|
29
29
|
4. [z-index variables](#z-index-variables)
|
|
30
30
|
5. [Reusable Animations](#reusable-animations)
|
|
31
31
|
4. [Typography Utility Classes](#typography-utility-classes)
|
|
32
|
-
5. [
|
|
32
|
+
5. [Component Visual Exports](#component-visual-exports)
|
|
33
|
+
1. [Radio Buttons](#radio-buttons)
|
|
34
|
+
6. [Using the `pie-css` SCSS helpers (mixins & functions)](#using-the-pie-css-scss-helpers-mixins--functions)
|
|
33
35
|
1. [Importing the `pie-css` SCSS helpers](#importing-the-pie-css-scss-helpers)
|
|
34
36
|
2. [`pie-css` SCSS Helper Definitions](#pie-css-scss-helper-definitions)
|
|
35
37
|
- [`font-size()`](#font-size)
|
|
36
38
|
- [`@include media()`](#include-media)
|
|
37
|
-
|
|
39
|
+
7. [Testing](#testing)
|
|
38
40
|
- [CSS](#css)
|
|
39
41
|
- [SCSS](#scss)
|
|
40
42
|
|
|
@@ -219,6 +221,16 @@ For complete documentation on all available typography utility classes, includin
|
|
|
219
221
|
|
|
220
222
|
---
|
|
221
223
|
|
|
224
|
+
## Component Visual Exports
|
|
225
|
+
|
|
226
|
+
In addition to typography utilities, pie-css provides ready-to-use CSS classes for some component patterns. These allow you to style native HTML elements with PIE design system styling.
|
|
227
|
+
|
|
228
|
+
Each component visual export will be found in the `dist` folder of `pie-css` as a separate CSS file, which you can import directly into your project like so: `@justeattakeaway/pie-css/dist/components/{component-name}.css`.
|
|
229
|
+
|
|
230
|
+
All available component visual exports will have a README file found at `/docs/components/{component-name}.md` in the `pie-css` package, which provides documentation on how to use the styles.
|
|
231
|
+
|
|
232
|
+
---
|
|
233
|
+
|
|
222
234
|
## Using the `pie-css` SCSS helpers (mixins & functions)
|
|
223
235
|
|
|
224
236
|
PIE CSS provides an optional set of SCSS helpers that are used by the PIE Web Components. These can also be used by web applications using SCSS, by importing the helpers into their project.
|
|
@@ -0,0 +1,151 @@
|
|
|
1
|
+
.c-radio {
|
|
2
|
+
--radio-dot-bg-color: var(--dt-color-content-interactive-primary);
|
|
3
|
+
--radio-bg-color: transparent;
|
|
4
|
+
--radio-bg-color--checked: var(--dt-color-interactive-brand);
|
|
5
|
+
--radio-border-color: var(--dt-color-border-form);
|
|
6
|
+
--radio-size: 24px;
|
|
7
|
+
--radio-dot-size: 8px;
|
|
8
|
+
--radio-cursor: pointer;
|
|
9
|
+
--radio-motion-easing: var(--dt-motion-easing-persistent-functional);
|
|
10
|
+
--radio-border-width: 1px;
|
|
11
|
+
appearance: none;
|
|
12
|
+
display: inline-block;
|
|
13
|
+
position: relative;
|
|
14
|
+
inline-size: var(--radio-size);
|
|
15
|
+
block-size: var(--radio-size);
|
|
16
|
+
border: var(--radio-border-width) solid var(--radio-border-color);
|
|
17
|
+
border-radius: 50%;
|
|
18
|
+
margin: 0;
|
|
19
|
+
cursor: var(--radio-cursor);
|
|
20
|
+
background-color: var(--radio-bg-color);
|
|
21
|
+
flex-shrink: 0;
|
|
22
|
+
transition: background-color var(--dt-motion-timing-100) var(--radio-motion-easing);
|
|
23
|
+
}
|
|
24
|
+
.c-radio:before {
|
|
25
|
+
--circle-size: calc(var(--radio-border-width) * -1);
|
|
26
|
+
content: "";
|
|
27
|
+
display: block;
|
|
28
|
+
inset: var(--circle-size);
|
|
29
|
+
border-radius: inherit;
|
|
30
|
+
background-color: var(--radio-bg-color--checked);
|
|
31
|
+
position: absolute;
|
|
32
|
+
transform: scale(0);
|
|
33
|
+
}
|
|
34
|
+
.c-radio:after {
|
|
35
|
+
content: "";
|
|
36
|
+
position: absolute;
|
|
37
|
+
top: 50%;
|
|
38
|
+
left: 50%;
|
|
39
|
+
width: var(--radio-dot-size);
|
|
40
|
+
height: var(--radio-dot-size);
|
|
41
|
+
background-color: var(--radio-dot-bg-color);
|
|
42
|
+
border-radius: 50%;
|
|
43
|
+
transform: translate(-50%, -50%) scale(0);
|
|
44
|
+
}
|
|
45
|
+
.c-radio:checked:after {
|
|
46
|
+
transform: translate(-50%, -50%) scale(1);
|
|
47
|
+
}
|
|
48
|
+
.c-radio:checked:before {
|
|
49
|
+
transform: scale(1);
|
|
50
|
+
}
|
|
51
|
+
.c-radio:focus-visible {
|
|
52
|
+
box-shadow: 0 0 0 2px var(--dt-color-focus-inner), 0 0 0 4px var(--dt-color-focus-outer);
|
|
53
|
+
outline: none;
|
|
54
|
+
}
|
|
55
|
+
.c-radio:disabled {
|
|
56
|
+
--radio-bg-color: var(--dt-color-disabled-01);
|
|
57
|
+
--radio-border-color: var(--dt-color-border-default);
|
|
58
|
+
--radio-cursor: not-allowed;
|
|
59
|
+
}
|
|
60
|
+
.c-radio:checked:disabled {
|
|
61
|
+
--radio-dot-bg-color: var(--dt-color-content-disabled);
|
|
62
|
+
--radio-bg-color--checked: var(--dt-color-disabled-01);
|
|
63
|
+
}
|
|
64
|
+
.c-radio:hover:not(:checked, :disabled) {
|
|
65
|
+
--radio-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--dt-color-hover-01));
|
|
66
|
+
}
|
|
67
|
+
@supports (background-color: color-mix(in srgb, black, white)) {
|
|
68
|
+
.c-radio:hover:not(:checked, :disabled) {
|
|
69
|
+
--radio-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), transparent);
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
.c-radio:active:not(:checked, :disabled) {
|
|
73
|
+
--radio-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--dt-color-active-01));
|
|
74
|
+
}
|
|
75
|
+
@supports (background-color: color-mix(in srgb, black, white)) {
|
|
76
|
+
.c-radio:active:not(:checked, :disabled) {
|
|
77
|
+
--radio-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), transparent);
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
.c-radio:hover:checked:not(:disabled):before {
|
|
81
|
+
--radio-bg-color--checked: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) - var(--dt-color-hover-01)));
|
|
82
|
+
--radio-border-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) - var(--dt-color-hover-01)));
|
|
83
|
+
}
|
|
84
|
+
@supports (background-color: color-mix(in srgb, black, white)) {
|
|
85
|
+
.c-radio:hover:checked:not(:disabled):before {
|
|
86
|
+
--radio-bg-color--checked: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-interactive-brand));
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
.c-radio:active:checked:not(:disabled):before {
|
|
90
|
+
--radio-bg-color--checked: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) - var(--dt-color-active-01)));
|
|
91
|
+
--radio-border-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) - var(--dt-color-active-01)));
|
|
92
|
+
}
|
|
93
|
+
@supports (background-color: color-mix(in srgb, black, white)) {
|
|
94
|
+
.c-radio:active:checked:not(:disabled):before {
|
|
95
|
+
--radio-bg-color--checked: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-interactive-brand));
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
99
|
+
.c-radio:not(:disabled):before {
|
|
100
|
+
transition: all var(--dt-motion-timing-100) var(--radio-motion-easing);
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
104
|
+
.c-radio:not(:disabled):after {
|
|
105
|
+
transition: all var(--dt-motion-timing-100) var(--radio-motion-easing);
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
109
|
+
.c-radio:not(:disabled):checked:after {
|
|
110
|
+
transition: all var(--dt-motion-timing-150) var(--radio-motion-easing);
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.c-radio--error {
|
|
115
|
+
--radio-bg-color--checked: var(--dt-color-support-error);
|
|
116
|
+
--radio-border-color: var(--dt-color-support-error);
|
|
117
|
+
}
|
|
118
|
+
.c-radio--error:hover:not(:checked, :disabled) {
|
|
119
|
+
--radio-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--dt-color-hover-01));
|
|
120
|
+
}
|
|
121
|
+
@supports (background-color: color-mix(in srgb, black, white)) {
|
|
122
|
+
.c-radio--error:hover:not(:checked, :disabled) {
|
|
123
|
+
--radio-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), transparent);
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
.c-radio--error:active:not(:checked, :disabled) {
|
|
127
|
+
--radio-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--dt-color-active-01));
|
|
128
|
+
}
|
|
129
|
+
@supports (background-color: color-mix(in srgb, black, white)) {
|
|
130
|
+
.c-radio--error:active:not(:checked, :disabled) {
|
|
131
|
+
--radio-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), transparent);
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
.c-radio--error:hover:checked:not(:disabled):before {
|
|
135
|
+
--radio-bg-color--checked: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) - var(--dt-color-hover-01)));
|
|
136
|
+
--radio-border-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) - var(--dt-color-hover-01)));
|
|
137
|
+
}
|
|
138
|
+
@supports (background-color: color-mix(in srgb, black, white)) {
|
|
139
|
+
.c-radio--error:hover:checked:not(:disabled):before {
|
|
140
|
+
--radio-bg-color--checked: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-support-error));
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
.c-radio--error:active:checked:not(:disabled):before {
|
|
144
|
+
--radio-bg-color--checked: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) - var(--dt-color-active-01)));
|
|
145
|
+
--radio-border-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) - var(--dt-color-active-01)));
|
|
146
|
+
}
|
|
147
|
+
@supports (background-color: color-mix(in srgb, black, white)) {
|
|
148
|
+
.c-radio--error:active:checked:not(:disabled):before {
|
|
149
|
+
--radio-bg-color--checked: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-support-error));
|
|
150
|
+
}
|
|
151
|
+
}
|
package/dist/index.css
CHANGED
|
@@ -155,6 +155,7 @@
|
|
|
155
155
|
--dt-color-container-base: rgb(255,255,255,0.72);
|
|
156
156
|
--dt-color-container-neutral: rgb(240,236,230,0.72);
|
|
157
157
|
--dt-color-container-prominent: rgb(255,255,255,0.4);
|
|
158
|
+
--dt-color-container-base-dark: rgb(43,42,40,0.62);
|
|
158
159
|
--dt-color-border-default: var(--dt-color-truffle-20);
|
|
159
160
|
--dt-color-border-subtle: var(--dt-color-truffle-10);
|
|
160
161
|
--dt-color-border-strong: var(--dt-color-truffle-30);
|
|
@@ -544,6 +545,13 @@
|
|
|
544
545
|
--dt-font-caption-strong-family: var(--dt-font-family-primary);
|
|
545
546
|
--dt-font-caption-strong-weight: var(--dt-font-weight-bold);
|
|
546
547
|
--dt-font-caption-strong-paragraph: var(--dt-font-paragraph-spacing-03);
|
|
548
|
+
/* Caption-strong-italic font theme */
|
|
549
|
+
--dt-font-caption-strong-italic-size: var(--dt-font-size-12);
|
|
550
|
+
--dt-font-caption-strong-italic-line-height: var(--dt-font-line-height-16);
|
|
551
|
+
--dt-font-caption-strong-italic-family: var(--dt-font-family-primary);
|
|
552
|
+
--dt-font-caption-strong-italic-weight: var(--dt-font-weight-extrabold);
|
|
553
|
+
--dt-font-caption-strong-italic-font-style: var(--dt-font-style-italic);
|
|
554
|
+
--dt-font-caption-strong-italic-paragraph: var(--dt-font-paragraph-spacing-03);
|
|
547
555
|
/* Caption-strong-link font theme */
|
|
548
556
|
--dt-font-caption-strong-link-size: var(--dt-font-size-12);
|
|
549
557
|
--dt-font-caption-strong-link-line-height: var(--dt-font-line-height-16);
|
|
@@ -688,6 +696,7 @@ html[data-color-mode="dark"] {
|
|
|
688
696
|
--dt-color-container-base: rgb(43,42,40,0.62);
|
|
689
697
|
--dt-color-container-neutral: rgb(89,86,79,0.72);
|
|
690
698
|
--dt-color-container-prominent: rgb(43,42,40,0.42);
|
|
699
|
+
--dt-color-container-base-dark: rgb(43,42,40,0.62);
|
|
691
700
|
--dt-color-border-default: var(--dt-color-truffle-70);
|
|
692
701
|
--dt-color-border-subtle: var(--dt-color-truffle-75);
|
|
693
702
|
--dt-color-border-strong: var(--dt-color-truffle-65);
|
|
@@ -864,6 +873,7 @@ html[data-color-mode="dark"] {
|
|
|
864
873
|
--dt-color-container-base: rgb(43,42,40,0.62);
|
|
865
874
|
--dt-color-container-neutral: rgb(89,86,79,0.72);
|
|
866
875
|
--dt-color-container-prominent: rgb(43,42,40,0.42);
|
|
876
|
+
--dt-color-container-base-dark: rgb(43,42,40,0.62);
|
|
867
877
|
--dt-color-border-default: var(--dt-color-truffle-70);
|
|
868
878
|
--dt-color-border-subtle: var(--dt-color-truffle-75);
|
|
869
879
|
--dt-color-border-strong: var(--dt-color-truffle-65);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-css",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.28.0",
|
|
4
4
|
"description": "A styling library that provides both a shared collection of ready to use CSS styles to be used across JET web front-ends, and SCSS-based style helpers for our PIE Web Component library.",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
"cdnContentType": "text/css"
|
|
21
21
|
},
|
|
22
22
|
"scripts": {
|
|
23
|
-
"build": "run -T ts-node ./buildCss.ts && run -T sass --load-path=../../../node_modules scss/_internal/typography.scss dist/helpers/typography.css --no-source-map",
|
|
23
|
+
"build": "run -T ts-node ./buildCss.ts && run -T sass --load-path=../../../node_modules scss/_internal/typography.scss dist/helpers/typography.css --no-source-map && run -T sass --load-path=../../../node_modules scss/_internal/radio.scss dist/components/radio.css --no-source-map",
|
|
24
24
|
"lint:scripts": "run -T eslint .",
|
|
25
25
|
"lint:scripts:fix": "yarn lint:scripts --fix",
|
|
26
26
|
"lint:style": "run -T stylelint ./**/*.{css,scss}",
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
],
|
|
39
39
|
"license": "Apache-2.0",
|
|
40
40
|
"dependencies": {
|
|
41
|
-
"@justeat/pie-design-tokens": "7.
|
|
41
|
+
"@justeat/pie-design-tokens": "7.11.1"
|
|
42
42
|
},
|
|
43
43
|
"devDependencies": {
|
|
44
44
|
"@types/postcss-import": "14.0.3",
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
@use '../mixins/components/radio' as radio;
|
|
2
|
+
|
|
3
|
+
.c-radio {
|
|
4
|
+
@include radio.radio-input-base;
|
|
5
|
+
@include radio.radio-interactive-state('dt-color-interactive-brand');
|
|
6
|
+
@include radio.radio-animations;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.c-radio--error {
|
|
10
|
+
@include radio.radio-error;
|
|
11
|
+
@include radio.radio-interactive-state('dt-color-support-error');
|
|
12
|
+
}
|
|
@@ -0,0 +1,195 @@
|
|
|
1
|
+
// INTERNAL USE ONLY
|
|
2
|
+
// These mixins are intended for internal use by PIE components (e.g., pie-radio).
|
|
3
|
+
// They are not part of the public API and may change without notice.
|
|
4
|
+
// For styling radio inputs in your application, use the pre-compiled CSS classes
|
|
5
|
+
// from @justeattakeaway/pie-css/dist/components/radio.css instead.
|
|
6
|
+
// See: packages/tools/pie-css/docs/components/RADIO.md
|
|
7
|
+
|
|
8
|
+
@use '../focus' as *;
|
|
9
|
+
@use '../../functions' as *;
|
|
10
|
+
|
|
11
|
+
/// Core mixin that applies all base radio input styles including pseudo-elements and states
|
|
12
|
+
/// @example scss - Basic usage
|
|
13
|
+
/// .my-radio {
|
|
14
|
+
/// @include radio-input-base();
|
|
15
|
+
/// }
|
|
16
|
+
@mixin radio-input-base() {
|
|
17
|
+
// CSS custom properties for theming
|
|
18
|
+
--radio-dot-bg-color: var(--dt-color-content-interactive-primary);
|
|
19
|
+
--radio-bg-color: transparent;
|
|
20
|
+
--radio-bg-color--checked: var(--dt-color-interactive-brand);
|
|
21
|
+
--radio-border-color: var(--dt-color-border-form);
|
|
22
|
+
--radio-size: 24px;
|
|
23
|
+
--radio-dot-size: 8px;
|
|
24
|
+
--radio-cursor: pointer;
|
|
25
|
+
--radio-motion-easing: var(--dt-motion-easing-persistent-functional);
|
|
26
|
+
--radio-border-width: 1px;
|
|
27
|
+
|
|
28
|
+
// Input element base styles
|
|
29
|
+
appearance: none;
|
|
30
|
+
display: inline-block;
|
|
31
|
+
position: relative;
|
|
32
|
+
inline-size: var(--radio-size);
|
|
33
|
+
block-size: var(--radio-size);
|
|
34
|
+
border: var(--radio-border-width) solid var(--radio-border-color);
|
|
35
|
+
border-radius: 50%;
|
|
36
|
+
margin: 0;
|
|
37
|
+
cursor: var(--radio-cursor);
|
|
38
|
+
background-color: var(--radio-bg-color);
|
|
39
|
+
flex-shrink: 0;
|
|
40
|
+
|
|
41
|
+
// The filled circle before checking the radio
|
|
42
|
+
&:before {
|
|
43
|
+
--circle-size: calc(var(--radio-border-width) * -1);
|
|
44
|
+
|
|
45
|
+
content: '';
|
|
46
|
+
display: block;
|
|
47
|
+
inset: var(--circle-size);
|
|
48
|
+
border-radius: inherit;
|
|
49
|
+
background-color: var(--radio-bg-color--checked);
|
|
50
|
+
position: absolute;
|
|
51
|
+
transform: scale(0);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
// The dot in the middle before checking the radio
|
|
55
|
+
&:after {
|
|
56
|
+
content: '';
|
|
57
|
+
position: absolute;
|
|
58
|
+
top: 50%;
|
|
59
|
+
left: 50%;
|
|
60
|
+
width: var(--radio-dot-size);
|
|
61
|
+
height: var(--radio-dot-size);
|
|
62
|
+
background-color: var(--radio-dot-bg-color);
|
|
63
|
+
border-radius: 50%;
|
|
64
|
+
transform: translate(-50%, -50%) scale(0);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
// Checked state
|
|
68
|
+
&:checked {
|
|
69
|
+
// The dot in the middle after checking the radio
|
|
70
|
+
&:after {
|
|
71
|
+
transform: translate(-50%, -50%) scale(1);
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
// The filled circle after checking the radio
|
|
75
|
+
&:before {
|
|
76
|
+
transform: scale(1);
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
// Focus state
|
|
81
|
+
&:focus-visible {
|
|
82
|
+
@include focus;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
// Disabled state
|
|
86
|
+
&:disabled {
|
|
87
|
+
--radio-bg-color: var(--dt-color-disabled-01);
|
|
88
|
+
--radio-border-color: var(--dt-color-border-default);
|
|
89
|
+
--radio-cursor: not-allowed;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
// Checked + disabled combination
|
|
93
|
+
&:checked:disabled {
|
|
94
|
+
--radio-dot-bg-color: var(--dt-color-content-disabled);
|
|
95
|
+
--radio-bg-color--checked: var(--dt-color-disabled-01);
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
/// Mixin for interactive states (hover, active) with progressive enhancement
|
|
100
|
+
/// @param {String} $bg-color - The design token name for the background color (without 'var()' wrapper)
|
|
101
|
+
/// @example scss - Using with brand color
|
|
102
|
+
/// .my-radio {
|
|
103
|
+
/// @include radio-interactive-state('dt-color-interactive-brand');
|
|
104
|
+
/// }
|
|
105
|
+
/// @example scss - Using with error color
|
|
106
|
+
/// .my-radio--error {
|
|
107
|
+
/// @include radio-interactive-state('dt-color-support-error');
|
|
108
|
+
/// }
|
|
109
|
+
@mixin radio-interactive-state($bg-color) {
|
|
110
|
+
// Unchecked hover state
|
|
111
|
+
&:hover:not(:checked, :disabled) {
|
|
112
|
+
--radio-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--dt-color-hover-01));
|
|
113
|
+
|
|
114
|
+
// Modern browsers with color-mix support
|
|
115
|
+
@supports (background-color: color-mix(in srgb, black, white)) {
|
|
116
|
+
--radio-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), transparent);
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
// Unchecked active state
|
|
121
|
+
&:active:not(:checked, :disabled) {
|
|
122
|
+
--radio-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--dt-color-active-01));
|
|
123
|
+
|
|
124
|
+
// Modern browsers with color-mix support
|
|
125
|
+
@supports (background-color: color-mix(in srgb, black, white)) {
|
|
126
|
+
--radio-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), transparent);
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
// Checked hover state
|
|
131
|
+
&:hover:checked:not(:disabled) {
|
|
132
|
+
&:before {
|
|
133
|
+
--radio-bg-color--checked: hsl(var(--#{$bg-color}-h), var(--#{$bg-color}-s), calc(var(--#{$bg-color}-l) - var(--dt-color-hover-01)));
|
|
134
|
+
--radio-border-color: hsl(var(--#{$bg-color}-h), var(--#{$bg-color}-s), calc(var(--#{$bg-color}-l) - var(--dt-color-hover-01)));
|
|
135
|
+
|
|
136
|
+
// Modern browsers with color-mix support
|
|
137
|
+
@supports (background-color: color-mix(in srgb, black, white)) {
|
|
138
|
+
--radio-bg-color--checked: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--#{$bg-color}));
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
// Checked active state
|
|
144
|
+
&:active:checked:not(:disabled) {
|
|
145
|
+
&:before {
|
|
146
|
+
--radio-bg-color--checked: hsl(var(--#{$bg-color}-h), var(--#{$bg-color}-s), calc(var(--#{$bg-color}-l) - var(--dt-color-active-01)));
|
|
147
|
+
--radio-border-color: hsl(var(--#{$bg-color}-h), var(--#{$bg-color}-s), calc(var(--#{$bg-color}-l) - var(--dt-color-active-01)));
|
|
148
|
+
|
|
149
|
+
// Modern browsers with color-mix support
|
|
150
|
+
@supports (background-color: color-mix(in srgb, black, white)) {
|
|
151
|
+
--radio-bg-color--checked: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--#{$bg-color}));
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
}
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
/// Error state modifier that overrides color custom properties
|
|
158
|
+
/// @example scss - Applying error state
|
|
159
|
+
/// .my-radio--error {
|
|
160
|
+
/// @include radio-error();
|
|
161
|
+
/// }
|
|
162
|
+
@mixin radio-error() {
|
|
163
|
+
--radio-bg-color--checked: var(--dt-color-support-error);
|
|
164
|
+
--radio-border-color: var(--dt-color-support-error);
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
/// Animations for radio state transitions with prefers-reduced-motion support
|
|
168
|
+
/// @example scss - Adding animations
|
|
169
|
+
/// .my-radio {
|
|
170
|
+
/// @include radio-animations();
|
|
171
|
+
/// }
|
|
172
|
+
@mixin radio-animations() {
|
|
173
|
+
transition: background-color var(--dt-motion-timing-100) var(--radio-motion-easing);
|
|
174
|
+
|
|
175
|
+
// Transition for the filled circle
|
|
176
|
+
&:not(:disabled):before {
|
|
177
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
178
|
+
transition: all var(--dt-motion-timing-100) var(--radio-motion-easing);
|
|
179
|
+
}
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
// Transition for the dot when unchecking (scales down at 100ms)
|
|
183
|
+
&:not(:disabled):after {
|
|
184
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
185
|
+
transition: all var(--dt-motion-timing-100) var(--radio-motion-easing);
|
|
186
|
+
}
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
// Transition for the dot when checking (scales up at 150ms for emphasis)
|
|
190
|
+
&:not(:disabled):checked:after {
|
|
191
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
192
|
+
transition: all var(--dt-motion-timing-150) var(--radio-motion-easing);
|
|
193
|
+
}
|
|
194
|
+
}
|
|
195
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@forward 'radio';
|
package/scss/mixins/index.scss
CHANGED