@semcore/feature-highlight 17.0.1 → 17.1.0-prerelease.1
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/CHANGELOG.md +6 -0
- package/lib/cjs/components/badge/Badge.js +5 -5
- package/lib/cjs/components/badge/badge.shadow.css +2 -2
- package/lib/cjs/components/button/Button.js +9 -9
- package/lib/cjs/components/button/button.shadow.css +24 -24
- package/lib/cjs/components/checkbox/Checkbox.js +3 -3
- package/lib/cjs/components/checkbox/Checkbox.js.map +1 -1
- package/lib/cjs/components/checkbox/Checkbox.type.js.map +1 -1
- package/lib/cjs/components/checkbox/checkbox.shadow.css +8 -5
- package/lib/cjs/components/input/Input.js +8 -8
- package/lib/cjs/components/input/input.shadow.css +2 -2
- package/lib/cjs/components/notice/Notice.js +6 -6
- package/lib/cjs/components/notice/notice.shadow.css +6 -6
- package/lib/cjs/components/pills/Pills.js +7 -7
- package/lib/cjs/components/pills/pills.shadow.css +6 -6
- package/lib/cjs/components/radio/Radio.js +3 -3
- package/lib/cjs/components/radio/Radio.js.map +1 -1
- package/lib/cjs/components/radio/Radio.type.js.map +1 -1
- package/lib/cjs/components/radio/radio.shadow.css +3 -3
- package/lib/cjs/components/switch/Switch.js +4 -4
- package/lib/cjs/components/switch/switch.shadow.css +4 -3
- package/lib/cjs/components/tab-line/TabLine.js +4 -4
- package/lib/cjs/components/tab-line/tabLine.shadow.css +3 -3
- package/lib/cjs/inner-components/button-trigger/ButtonTrigger.js +8 -8
- package/lib/cjs/inner-components/button-trigger/buttonTrigger.shadow.css +5 -5
- package/lib/cjs/inner-components/sparkle/Sparkle.js +13 -13
- package/lib/cjs/inner-components/sparkle/style/sparkle.shadow.css +1 -1
- package/lib/es6/components/badge/Badge.js +5 -5
- package/lib/es6/components/badge/badge.shadow.css +2 -2
- package/lib/es6/components/button/Button.js +9 -9
- package/lib/es6/components/button/button.shadow.css +24 -24
- package/lib/es6/components/checkbox/Checkbox.js +3 -3
- package/lib/es6/components/checkbox/Checkbox.js.map +1 -1
- package/lib/es6/components/checkbox/Checkbox.type.js.map +1 -1
- package/lib/es6/components/checkbox/checkbox.shadow.css +8 -5
- package/lib/es6/components/input/Input.js +8 -8
- package/lib/es6/components/input/input.shadow.css +2 -2
- package/lib/es6/components/notice/Notice.js +6 -6
- package/lib/es6/components/notice/notice.shadow.css +6 -6
- package/lib/es6/components/pills/Pills.js +7 -7
- package/lib/es6/components/pills/pills.shadow.css +6 -6
- package/lib/es6/components/radio/Radio.js +3 -3
- package/lib/es6/components/radio/Radio.js.map +1 -1
- package/lib/es6/components/radio/Radio.type.js.map +1 -1
- package/lib/es6/components/radio/radio.shadow.css +3 -3
- package/lib/es6/components/switch/Switch.js +4 -4
- package/lib/es6/components/switch/switch.shadow.css +4 -3
- package/lib/es6/components/tab-line/TabLine.js +4 -4
- package/lib/es6/components/tab-line/tabLine.shadow.css +3 -3
- package/lib/es6/inner-components/button-trigger/ButtonTrigger.js +8 -8
- package/lib/es6/inner-components/button-trigger/buttonTrigger.shadow.css +5 -5
- package/lib/es6/inner-components/sparkle/Sparkle.js +13 -13
- package/lib/es6/inner-components/sparkle/style/sparkle.shadow.css +1 -1
- package/lib/esm/components/badge/Badge.mjs +6 -6
- package/lib/esm/components/badge/badge.shadow.css +2 -2
- package/lib/esm/components/button/Button.mjs +10 -10
- package/lib/esm/components/button/button.shadow.css +24 -24
- package/lib/esm/components/checkbox/Checkbox.mjs +4 -4
- package/lib/esm/components/checkbox/checkbox.shadow.css +8 -5
- package/lib/esm/components/input/Input.mjs +9 -9
- package/lib/esm/components/input/input.shadow.css +2 -2
- package/lib/esm/components/notice/Notice.mjs +7 -7
- package/lib/esm/components/notice/notice.shadow.css +6 -6
- package/lib/esm/components/pills/Pills.mjs +8 -8
- package/lib/esm/components/pills/pills.shadow.css +6 -6
- package/lib/esm/components/radio/Radio.mjs +4 -4
- package/lib/esm/components/radio/radio.shadow.css +3 -3
- package/lib/esm/components/switch/Switch.mjs +5 -5
- package/lib/esm/components/switch/switch.shadow.css +4 -3
- package/lib/esm/components/tab-line/TabLine.mjs +5 -5
- package/lib/esm/components/tab-line/tabLine.shadow.css +3 -3
- package/lib/esm/inner-components/button-trigger/ButtonTrigger.mjs +9 -9
- package/lib/esm/inner-components/button-trigger/buttonTrigger.shadow.css +5 -5
- package/lib/esm/inner-components/sparkle/Sparkle.mjs +14 -14
- package/lib/esm/inner-components/sparkle/style/sparkle.shadow.css +1 -1
- package/lib/types/components/checkbox/Checkbox.type.d.ts +4 -4
- package/lib/types/components/radio/Radio.type.d.ts +3 -3
- package/package.json +19 -19
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Radio.type.js","names":[],"sources":["../../../../src/components/radio/Radio.type.ts"],"sourcesContent":["import type { Intergalactic } from '@semcore/core';\nimport type {
|
|
1
|
+
{"version":3,"file":"Radio.type.js","names":[],"sources":["../../../../src/components/radio/Radio.type.ts"],"sourcesContent":["import type { Intergalactic } from '@semcore/core';\nimport type { NSRadio } from '@semcore/radio';\nimport type { Text } from '@semcore/typography';\n\nimport type { AnimatedSparklesProps } from '../../inner-components/sparkle/AnimatedSparkles';\n\nexport type HighlightedRadioComponent = Intergalactic.Component<'label', NSRadio.Props, NSRadio.Ctx> & {\n Value: Intergalactic.Component<'input', NSRadio.Value.Props>;\n Text: typeof Text;\n AnimatedSparkles: Intergalactic.Component<'div', AnimatedSparklesProps>;\n};\n"],"mappings":"","ignoreList":[]}
|
|
@@ -5,7 +5,7 @@ SHighlightedRadio {
|
|
|
5
5
|
SHighlightedRadio:not([state="invalid"]) {
|
|
6
6
|
[data-ui-name="Value.RadioMark"] {
|
|
7
7
|
border-radius: 50%;
|
|
8
|
-
background: var(--intergalactic-border-feature-highlight, linear-gradient(90deg,
|
|
8
|
+
background: var(--intergalactic-border-feature-highlight, linear-gradient(90deg in oklch, oklch(0.82 0.118 303), oklch(0.82 0.088 272.1)));
|
|
9
9
|
}
|
|
10
10
|
|
|
11
11
|
[data-ui-name="Value.RadioMark"]::before {
|
|
@@ -18,7 +18,7 @@ SHighlightedRadio:not([state="invalid"]) {
|
|
|
18
18
|
border-radius: 50%;
|
|
19
19
|
border-width: 0;
|
|
20
20
|
pointer-events: none;
|
|
21
|
-
background-image: var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg,
|
|
21
|
+
background-image: var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg in oklch, oklch(0.74 0.17 303), oklch(0.58 0.168 278.2)));
|
|
22
22
|
|
|
23
23
|
mask: linear-gradient(0deg, #fff, #fff) content-box, linear-gradient(0deg, #fff, #fff);
|
|
24
24
|
mask-composite: exclude;
|
|
@@ -38,7 +38,7 @@ SHighlightedRadio:not([state="invalid"]) {
|
|
|
38
38
|
right: 0;
|
|
39
39
|
bottom: 0;
|
|
40
40
|
border-radius: 50%;
|
|
41
|
-
background: var(--intergalactic-bg-primary-neutral,
|
|
41
|
+
background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0));
|
|
42
42
|
top: 50%;
|
|
43
43
|
left: 50%;
|
|
44
44
|
width: calc(100% - 2px);
|
|
@@ -11,12 +11,12 @@ var _switch = _interopRequireDefault(require("@semcore/switch"));
|
|
|
11
11
|
var _react = _interopRequireDefault(require("react"));
|
|
12
12
|
var _AnimatedSparkles = require("../../inner-components/sparkle/AnimatedSparkles");
|
|
13
13
|
/*!__reshadow-styles__:"./switch.shadow.css"*/
|
|
14
|
-
const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".
|
|
14
|
+
const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SToggle_2rjpq_gg_{position:relative;transform:translate(0)}.___SToggle_2rjpq_gg_::before{content:\"\";position:absolute;z-index:-1;top:0;right:0;bottom:0;left:0;margin:0;padding:2px;border-radius:inherit;background-image:var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg in oklch, rgb(192, 142, 255), rgb(102, 107, 219)));-webkit-mask:linear-gradient(0deg,#fff,#fff) content-box,linear-gradient(0deg,#fff,#fff);mask:linear-gradient(0deg,#fff,#fff) content-box,linear-gradient(0deg,#fff,#fff);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transform:scale(.96);pointer-events:none;transition:opacity calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out,transform calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out}@supports (background:linear-gradient(in oklch,red 0%,red 0% 1%,red 2%)) and (color:color(display-p3 0 0 0%)){.___SToggle_2rjpq_gg_::before{background-image:var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg in oklch, rgb(192, 142, 255), rgb(102, 107, 219)))}@media (color-gamut:p3){.___SToggle_2rjpq_gg_::before{background-image:var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg in oklch, color(display-p3 0.72564 0.56096 0.98326), rgb(102, 107, 219)))}}}.___SToggle_2rjpq_gg_.__checked_2rjpq_gg_{color:var(--intergalactic-control-primary-info, rgb(26, 30, 26));background-image:var(--intergalactic-control-primary-feature-highlight, linear-gradient(90deg in oklch, rgb(162, 97, 253), rgb(148, 165, 245)))}.___SToggle_2rjpq_gg_:has(.___SInput_2rjpq_gg_:focus-visible){box-shadow:none;outline:0}.___SToggle_2rjpq_gg_:has(.___SInput_2rjpq_gg_:focus-visible)::before{margin:-4px;opacity:1;transform:scale(1)}@supports not (-webkit-mask-composite:xor){.___SToggle_2rjpq_gg_:has(.___SInput_2rjpq_gg_:focus-visible){outline:0;box-shadow:0 0 0 2px #fff,0 0 0 4px #7078fc}.___SToggle_2rjpq_gg_:has(.___SInput_2rjpq_gg_:focus-visible)::before{display:none}}", /*__inner_css_end__*/"2rjpq_gg_"),
|
|
15
15
|
/*__reshadow_css_end__*/
|
|
16
16
|
{
|
|
17
|
-
"__SToggle": "
|
|
18
|
-
"_checked": "
|
|
19
|
-
"__SInput": "
|
|
17
|
+
"__SToggle": "___SToggle_2rjpq_gg_",
|
|
18
|
+
"_checked": "__checked_2rjpq_gg_",
|
|
19
|
+
"__SInput": "___SInput_2rjpq_gg_"
|
|
20
20
|
});
|
|
21
21
|
class SwitchFHRoot extends _core.Component {
|
|
22
22
|
constructor(...args) {
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
SToggle {
|
|
2
2
|
position: relative;
|
|
3
|
+
transform: translate(0);
|
|
3
4
|
|
|
4
5
|
&::before {
|
|
5
6
|
content: "";
|
|
@@ -10,7 +11,7 @@ SToggle {
|
|
|
10
11
|
padding: 2px;
|
|
11
12
|
border-radius: inherit;
|
|
12
13
|
|
|
13
|
-
background-image: var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg,
|
|
14
|
+
background-image: var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg in oklch, oklch(0.74 0.17 303), oklch(0.58 0.168 278.2)));
|
|
14
15
|
mask: linear-gradient(0deg, #fff, #fff) content-box, linear-gradient(0deg, #fff, #fff);
|
|
15
16
|
mask-composite: exclude;
|
|
16
17
|
|
|
@@ -25,8 +26,8 @@ SToggle {
|
|
|
25
26
|
}
|
|
26
27
|
|
|
27
28
|
SToggle[checked] {
|
|
28
|
-
color: var(--intergalactic-control-primary-info,
|
|
29
|
-
background-image: var(--intergalactic-control-primary-feature-highlight, linear-gradient(90deg,
|
|
29
|
+
color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140));
|
|
30
|
+
background-image: var(--intergalactic-control-primary-feature-highlight, linear-gradient(90deg in oklch, oklch(0.64 0.223 299.3), oklch(0.74 0.117 274.1)));
|
|
30
31
|
}
|
|
31
32
|
|
|
32
33
|
SToggle:has(SInput:focus-visible) {
|
|
@@ -12,12 +12,12 @@ var _tabLine = _interopRequireDefault(require("@semcore/tab-line"));
|
|
|
12
12
|
var _react = _interopRequireDefault(require("react"));
|
|
13
13
|
var _AnimatedSparkles = require("../../inner-components/sparkle/AnimatedSparkles");
|
|
14
14
|
/*!__reshadow-styles__:"./tabLine.shadow.css"*/
|
|
15
|
-
const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".
|
|
15
|
+
const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SHighlightedItem_10jcl_gg_:focus-visible{outline:0}.___SHighlightedItem_10jcl_gg_:focus-visible::before{opacity:1;transform:scale(1)}.___SHighlightedItem_10jcl_gg_::after{opacity:0;transition:opacity calc(var(--intergalactic-duration-control, 200)*1ms) ease-in-out}.___SHighlightedItem_10jcl_gg_.__selected_10jcl_gg_::after{opacity:1;background:var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg in oklch, rgb(192, 142, 255), rgb(148, 165, 245)))}@supports (background:linear-gradient(in oklch,red 0%,red 0% 1%,red 2%)) and (color:color(display-p3 0 0 0%)){.___SHighlightedItem_10jcl_gg_.__selected_10jcl_gg_::after{background:var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg in oklch, rgb(192, 142, 255), rgb(148, 165, 245)))}@media (color-gamut:p3){.___SHighlightedItem_10jcl_gg_.__selected_10jcl_gg_::after{background:var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg in oklch, color(display-p3 0.72564 0.56096 0.98326), rgb(148, 165, 245)))}}}@media (hover:hover){.___SHighlightedItem_10jcl_gg_:hover:not(:focus-visible)::after{opacity:1;background:var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg in oklch, rgb(192, 142, 255), rgb(148, 165, 245)))}@supports (background:linear-gradient(in oklch,red 0%,red 0% 1%,red 2%)) and (color:color(display-p3 0 0 0%)){.___SHighlightedItem_10jcl_gg_:hover:not(:focus-visible)::after{background:var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg in oklch, rgb(192, 142, 255), rgb(148, 165, 245)))}@media (color-gamut:p3){.___SHighlightedItem_10jcl_gg_:hover:not(:focus-visible)::after{background:var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg in oklch, color(display-p3 0.72564 0.56096 0.98326), rgb(148, 165, 245)))}}}}.___SHighlightedItem_10jcl_gg_::before{content:\"\";position:absolute;z-index:0;top:0;right:0;bottom:0;left:0;height:auto;width:calc(100% + 4px);margin:-4px;padding:2px;box-sizing:content-box;background-image:var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg in oklch, rgb(192, 142, 255), rgb(102, 107, 219)));-webkit-mask:linear-gradient(0deg,#fff,#fff) content-box,linear-gradient(0deg,#fff,#fff);mask:linear-gradient(0deg,#fff,#fff) content-box,linear-gradient(0deg,#fff,#fff);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transform:scale(.96);transition:opacity calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out,transform calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out}@supports (background:linear-gradient(in oklch,red 0%,red 0% 1%,red 2%)) and (color:color(display-p3 0 0 0%)){.___SHighlightedItem_10jcl_gg_::before{background-image:var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg in oklch, rgb(192, 142, 255), rgb(102, 107, 219)))}@media (color-gamut:p3){.___SHighlightedItem_10jcl_gg_::before{background-image:var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg in oklch, color(display-p3 0.72564 0.56096 0.98326), rgb(102, 107, 219)))}}}.___SHighlightedCaret_10jcl_gg_{background:var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg in oklch, rgb(192, 142, 255), rgb(148, 165, 245)))}@supports (background:linear-gradient(in oklch,red 0%,red 0% 1%,red 2%)) and (color:color(display-p3 0 0 0%)){.___SHighlightedCaret_10jcl_gg_{background:var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg in oklch, rgb(192, 142, 255), rgb(148, 165, 245)))}@media (color-gamut:p3){.___SHighlightedCaret_10jcl_gg_{background:var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg in oklch, color(display-p3 0.72564 0.56096 0.98326), rgb(148, 165, 245)))}}}", /*__inner_css_end__*/"10jcl_gg_"),
|
|
16
16
|
/*__reshadow_css_end__*/
|
|
17
17
|
{
|
|
18
|
-
"__SHighlightedCaret": "
|
|
19
|
-
"__SHighlightedItem": "
|
|
20
|
-
"_selected": "
|
|
18
|
+
"__SHighlightedCaret": "___SHighlightedCaret_10jcl_gg_",
|
|
19
|
+
"__SHighlightedItem": "___SHighlightedItem_10jcl_gg_",
|
|
20
|
+
"_selected": "__selected_10jcl_gg_"
|
|
21
21
|
});
|
|
22
22
|
class TabLineFHRoot extends _core.Component {
|
|
23
23
|
render() {
|
|
@@ -14,7 +14,7 @@ SHighlightedItem {
|
|
|
14
14
|
}
|
|
15
15
|
&[selected]::after, &:hover:not(:focus-visible)::after {
|
|
16
16
|
opacity: 1;
|
|
17
|
-
background: var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg,
|
|
17
|
+
background: var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg in oklch, oklch(0.74 0.17 303), oklch(0.74 0.117 274.1)));
|
|
18
18
|
}
|
|
19
19
|
|
|
20
20
|
&::before {
|
|
@@ -27,7 +27,7 @@ SHighlightedItem {
|
|
|
27
27
|
margin: -4px;
|
|
28
28
|
padding: 2px;
|
|
29
29
|
box-sizing: content-box;
|
|
30
|
-
background-image: var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg,
|
|
30
|
+
background-image: var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg in oklch, oklch(0.74 0.17 303), oklch(0.58 0.168 278.2)));
|
|
31
31
|
|
|
32
32
|
mask: linear-gradient(0deg, #fff, #fff) content-box, linear-gradient(0deg, #fff, #fff);
|
|
33
33
|
mask-composite: exclude;
|
|
@@ -42,5 +42,5 @@ SHighlightedItem {
|
|
|
42
42
|
}
|
|
43
43
|
|
|
44
44
|
SHighlightedCaret {
|
|
45
|
-
background: var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg,
|
|
45
|
+
background: var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg in oklch, oklch(0.74 0.17 303), oklch(0.74 0.117 274.1)));
|
|
46
46
|
}
|
|
@@ -11,16 +11,16 @@ var _baseTrigger = require("@semcore/base-trigger");
|
|
|
11
11
|
var _m = _interopRequireDefault(require("@semcore/icon/SummaryAI/m"));
|
|
12
12
|
var _react = _interopRequireDefault(require("react"));
|
|
13
13
|
/*!__reshadow-styles__:"./buttonTrigger.shadow.css"*/
|
|
14
|
-
const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".
|
|
14
|
+
const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SHighlightedButtonTrigger_gqbwh_gg_:not(._state_invalid_gqbwh_gg_):not(._state_valid_gqbwh_gg_){border:1px solid transparent;background:linear-gradient(white,white) padding-box,var(--intergalactic-border-feature-highlight, linear-gradient(90deg in oklch, rgb(210, 179, 255), rgb(176, 193, 254))) border-box;background-origin:border-box;background-clip:padding-box,border-box;position:relative;z-index:1}@supports (background:linear-gradient(in oklch,red 0%,red 0% 1%,red 2%)) and (color:color(display-p3 0 0 0%)){.___SHighlightedButtonTrigger_gqbwh_gg_:not(._state_invalid_gqbwh_gg_):not(._state_valid_gqbwh_gg_){background:linear-gradient(white,white) padding-box,var(--intergalactic-border-feature-highlight, linear-gradient(90deg in oklch, rgb(210, 179, 255), rgb(176, 193, 254))) border-box}@media (color-gamut:p3){.___SHighlightedButtonTrigger_gqbwh_gg_:not(._state_invalid_gqbwh_gg_):not(._state_valid_gqbwh_gg_){background:linear-gradient(white,white) padding-box,var(--intergalactic-border-feature-highlight, linear-gradient(90deg in oklch, color(display-p3 0.80738 0.70018 0.99486), rgb(176, 193, 254))) border-box}}}.___SHighlightedButtonTrigger_gqbwh_gg_:not(._state_invalid_gqbwh_gg_):not(._state_valid_gqbwh_gg_)::before{content:\"\";position:absolute;z-index:-1;top:0;right:0;bottom:0;left:0;margin:-5px;padding:2px;border-radius:calc(var(--intergalactic-control-rounded, 6px) + 3px);background-image:var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg in oklch, rgb(192, 142, 255), rgb(102, 107, 219)));-webkit-mask:linear-gradient(0deg,#fff,#fff) content-box,linear-gradient(0deg,#fff,#fff);mask:linear-gradient(0deg,#fff,#fff) content-box,linear-gradient(0deg,#fff,#fff);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transform:scale(.96);pointer-events:none;transition:opacity calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out,transform calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out}@supports (background:linear-gradient(in oklch,red 0%,red 0% 1%,red 2%)) and (color:color(display-p3 0 0 0%)){.___SHighlightedButtonTrigger_gqbwh_gg_:not(._state_invalid_gqbwh_gg_):not(._state_valid_gqbwh_gg_)::before{background-image:var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg in oklch, rgb(192, 142, 255), rgb(102, 107, 219)))}@media (color-gamut:p3){.___SHighlightedButtonTrigger_gqbwh_gg_:not(._state_invalid_gqbwh_gg_):not(._state_valid_gqbwh_gg_)::before{background-image:var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg in oklch, color(display-p3 0.72564 0.56096 0.98326), rgb(102, 107, 219)))}}}@media (hover:hover){.___SHighlightedButtonTrigger_gqbwh_gg_:not(._state_invalid_gqbwh_gg_):not(._state_valid_gqbwh_gg_):hover{background:var(--intergalactic-bg-primary-feature-highlight-hover-active, linear-gradient(90deg in oklch, rgb(247, 243, 255), rgb(222, 231, 255))) padding-box,var(--intergalactic-border-feature-highlight, linear-gradient(90deg in oklch, rgb(210, 179, 255), rgb(176, 193, 254))) border-box}@supports (background:linear-gradient(in oklch,red 0%,red 0% 1%,red 2%)) and (color:color(display-p3 0 0 0%)){.___SHighlightedButtonTrigger_gqbwh_gg_:not(._state_invalid_gqbwh_gg_):not(._state_valid_gqbwh_gg_):hover{background:var(--intergalactic-bg-primary-feature-highlight-hover-active, linear-gradient(90deg in oklch, rgb(247, 243, 255), rgb(222, 231, 255))) padding-box,var(--intergalactic-border-feature-highlight, linear-gradient(90deg in oklch, rgb(210, 179, 255), rgb(176, 193, 254))) border-box}@media (color-gamut:p3){.___SHighlightedButtonTrigger_gqbwh_gg_:not(._state_invalid_gqbwh_gg_):not(._state_valid_gqbwh_gg_):hover{background:var(--intergalactic-bg-primary-feature-highlight-hover-active, linear-gradient(90deg in oklch, color(display-p3 0.96716 0.95079 0.99961), color(display-p3 0.87344 0.9059 0.99962))) padding-box,var(--intergalactic-border-feature-highlight, linear-gradient(90deg in oklch, color(display-p3 0.80738 0.70018 0.99486), rgb(176, 193, 254))) border-box}}}}.___SHighlightedButtonTrigger_gqbwh_gg_.__active_gqbwh_gg_:not(._state_invalid_gqbwh_gg_):not(._state_valid_gqbwh_gg_),.___SHighlightedButtonTrigger_gqbwh_gg_:not(._state_invalid_gqbwh_gg_):not(._state_valid_gqbwh_gg_):active{background:linear-gradient(white,white) padding-box,var(--intergalactic-control-primary-feature-highlight-hover, linear-gradient(90deg in oklch, rgb(162, 97, 253), rgb(148, 165, 245))) border-box;background-origin:border-box;background-clip:padding-box,border-box;border-color:transparent}.___SHighlightedButtonTrigger_gqbwh_gg_:not(._state_invalid_gqbwh_gg_):not(._state_valid_gqbwh_gg_):focus-visible{outline:0;border-color:transparent}.___SHighlightedButtonTrigger_gqbwh_gg_:not(._state_invalid_gqbwh_gg_):not(._state_valid_gqbwh_gg_):focus-visible::before{opacity:1;transform:scale(1)}.___SHighlightedButtonTrigger_gqbwh_gg_._neighborLocation_left_gqbwh_gg_:not(._state_invalid_gqbwh_gg_):not(._state_valid_gqbwh_gg_)::before{border-top-left-radius:0;border-bottom-left-radius:0}.___SHighlightedButtonTrigger_gqbwh_gg_._neighborLocation_right_gqbwh_gg_:not(._state_invalid_gqbwh_gg_):not(._state_valid_gqbwh_gg_)::before{border-top-right-radius:0;border-bottom-right-radius:0}.___SHighlightedButtonTrigger_gqbwh_gg_._neighborLocation_both_gqbwh_gg_:not(._state_invalid_gqbwh_gg_):not(._state_valid_gqbwh_gg_)::before{border-radius:0}@supports not (-webkit-mask-composite:xor){.___SHighlightedButtonTrigger_gqbwh_gg_:not(._state_invalid_gqbwh_gg_):not(._state_valid_gqbwh_gg_):focus-visible{outline:0;box-shadow:0 0 0 2px #fff,0 0 0 4px #7078fc}.___SHighlightedButtonTrigger_gqbwh_gg_:not(._state_invalid_gqbwh_gg_):not(._state_valid_gqbwh_gg_):focus-visible::before{display:none}}", /*__inner_css_end__*/"gqbwh_gg_"),
|
|
15
15
|
/*__reshadow_css_end__*/
|
|
16
16
|
{
|
|
17
|
-
"__SHighlightedButtonTrigger": "
|
|
18
|
-
"_state_invalid": "
|
|
19
|
-
"_state_valid": "
|
|
20
|
-
"_active": "
|
|
21
|
-
"_neighborLocation_left": "
|
|
22
|
-
"_neighborLocation_right": "
|
|
23
|
-
"_neighborLocation_both": "
|
|
17
|
+
"__SHighlightedButtonTrigger": "___SHighlightedButtonTrigger_gqbwh_gg_",
|
|
18
|
+
"_state_invalid": "_state_invalid_gqbwh_gg_",
|
|
19
|
+
"_state_valid": "_state_valid_gqbwh_gg_",
|
|
20
|
+
"_active": "__active_gqbwh_gg_",
|
|
21
|
+
"_neighborLocation_left": "_neighborLocation_left_gqbwh_gg_",
|
|
22
|
+
"_neighborLocation_right": "_neighborLocation_right_gqbwh_gg_",
|
|
23
|
+
"_neighborLocation_both": "_neighborLocation_both_gqbwh_gg_"
|
|
24
24
|
});
|
|
25
25
|
class ButtonTriggerFHRoot extends _core.Component {
|
|
26
26
|
render() {
|
|
@@ -2,7 +2,7 @@ SHighlightedButtonTrigger:not([state="invalid"]):not([state="valid"]) {
|
|
|
2
2
|
border: 1px solid transparent;
|
|
3
3
|
background:
|
|
4
4
|
linear-gradient(white, white) padding-box,
|
|
5
|
-
var(--intergalactic-border-feature-highlight, linear-gradient(90deg,
|
|
5
|
+
var(--intergalactic-border-feature-highlight, linear-gradient(90deg in oklch, oklch(0.82 0.118 303), oklch(0.82 0.088 272.1))) border-box;
|
|
6
6
|
background-origin: border-box;
|
|
7
7
|
background-clip: padding-box, border-box;
|
|
8
8
|
position: relative;
|
|
@@ -16,7 +16,7 @@ SHighlightedButtonTrigger:not([state="invalid"]):not([state="valid"]) {
|
|
|
16
16
|
margin: -5px;
|
|
17
17
|
padding: 2px;
|
|
18
18
|
border-radius: calc(var(--intergalactic-control-rounded, 6px) + 3px);
|
|
19
|
-
background-image: var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg,
|
|
19
|
+
background-image: var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg in oklch, oklch(0.74 0.17 303), oklch(0.58 0.168 278.2)));
|
|
20
20
|
|
|
21
21
|
mask: linear-gradient(0deg, #fff, #fff) content-box, linear-gradient(0deg, #fff, #fff);
|
|
22
22
|
mask-composite: exclude;
|
|
@@ -31,15 +31,15 @@ SHighlightedButtonTrigger:not([state="invalid"]):not([state="valid"]) {
|
|
|
31
31
|
}
|
|
32
32
|
|
|
33
33
|
&:hover {
|
|
34
|
-
background: var(--intergalactic-bg-primary-feature-highlight-hover-active, linear-gradient(90deg,
|
|
35
|
-
var(--intergalactic-border-feature-highlight, linear-gradient(90deg,
|
|
34
|
+
background: var(--intergalactic-bg-primary-feature-highlight-hover-active, linear-gradient(90deg in oklch, oklch(0.97 0.019 303.4), oklch(0.929 0.037 268))) padding-box,
|
|
35
|
+
var(--intergalactic-border-feature-highlight, linear-gradient(90deg in oklch, oklch(0.82 0.118 303), oklch(0.82 0.088 272.1))) border-box;
|
|
36
36
|
}
|
|
37
37
|
|
|
38
38
|
&:active,
|
|
39
39
|
&[active] {
|
|
40
40
|
background:
|
|
41
41
|
linear-gradient(white, white) padding-box,
|
|
42
|
-
var(--intergalactic-control-primary-feature-highlight-hover, linear-gradient(90deg,
|
|
42
|
+
var(--intergalactic-control-primary-feature-highlight-hover, linear-gradient(90deg in oklch, oklch(0.64 0.223 299.3), oklch(0.74 0.117 274.1))) border-box;
|
|
43
43
|
background-origin: border-box;
|
|
44
44
|
background-clip: padding-box, border-box;
|
|
45
45
|
border-color: transparent;
|
|
@@ -8,21 +8,21 @@ exports.default = void 0;
|
|
|
8
8
|
var _core = require("@semcore/core");
|
|
9
9
|
var _react = _interopRequireDefault(require("react"));
|
|
10
10
|
/*!__reshadow-styles__:"./style/sparkle.shadow.css"*/
|
|
11
|
-
const styles = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/"@keyframes
|
|
11
|
+
const styles = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/"@keyframes sparkles_4t4us{50%{transform:rotate(calc(1deg*var(--angle_4t4us))) translateY(200%) scale(var(--scale_4t4us))}to{transform:rotate(calc(1deg*var(--angle_4t4us))) translateY(200%) scale(0)}}.___SSparkle_4t4us_gg_{position:absolute}.___SSparkle_4t4us_gg_ path{fill:var(--intergalactic-icon-primary-feature-highlight, rgb(144, 65, 250))}.___SSparkle_4t4us_gg_.__angle_4t4us_gg_.__scale_4t4us_gg_.__duration_4t4us_gg_{transform:rotate(calc(1deg*var(--angle_4t4us))) scale(var(--scale_4t4us));animation-name:sparkles_4t4us;animation-fill-mode:forwards;animation-duration:var(--duration_4t4us)}.___SSparkle_4t4us_gg_.__left_4t4us_gg_{left:var(--left_4t4us)}.___SSparkle_4t4us_gg_.__top_4t4us_gg_{top:var(--top_4t4us)}", /*__inner_css_end__*/"4t4us_gg_"),
|
|
12
12
|
/*__reshadow_css_end__*/
|
|
13
13
|
{
|
|
14
|
-
"__SSparkle": "
|
|
15
|
-
"_angle": "
|
|
16
|
-
"_scale": "
|
|
17
|
-
"_duration": "
|
|
18
|
-
"--angle": "--
|
|
19
|
-
"--scale": "--
|
|
20
|
-
"--duration": "--
|
|
21
|
-
"@sparkles": "
|
|
22
|
-
"_left": "
|
|
23
|
-
"--left": "--
|
|
24
|
-
"_top": "
|
|
25
|
-
"--top": "--
|
|
14
|
+
"__SSparkle": "___SSparkle_4t4us_gg_",
|
|
15
|
+
"_angle": "__angle_4t4us_gg_",
|
|
16
|
+
"_scale": "__scale_4t4us_gg_",
|
|
17
|
+
"_duration": "__duration_4t4us_gg_",
|
|
18
|
+
"--angle": "--angle_4t4us",
|
|
19
|
+
"--scale": "--scale_4t4us",
|
|
20
|
+
"--duration": "--duration_4t4us",
|
|
21
|
+
"@sparkles": "sparkles_4t4us",
|
|
22
|
+
"_left": "__left_4t4us_gg_",
|
|
23
|
+
"--left": "--left_4t4us",
|
|
24
|
+
"_top": "__top_4t4us_gg_",
|
|
25
|
+
"--top": "--top_4t4us"
|
|
26
26
|
});
|
|
27
27
|
function SvgSparkle(props, ref) {
|
|
28
28
|
var _ref = arguments[0],
|
|
@@ -6,13 +6,13 @@ import { createComponent, Component, Root, sstyled } from '@semcore/core';
|
|
|
6
6
|
import resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';
|
|
7
7
|
import React from 'react';
|
|
8
8
|
/*!__reshadow-styles__:"./badge.shadow.css"*/
|
|
9
|
-
const style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".
|
|
9
|
+
const style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___SHighlightedBadge_b73tz_gg_{color:var(--intergalactic-text-primary-invert, rgba(254, 255, 255, 0.949))}.___SHighlightedBadge_b73tz_gg_._use_accent_b73tz_gg_{background-image:var(--intergalactic-control-primary-feature-highlight, linear-gradient(90deg in oklch, rgb(162, 97, 253), rgb(148, 165, 245)))}.___SHighlightedBadge_b73tz_gg_.__bg_b73tz_gg_{background-color:var(--bg_b73tz)}", /*__inner_css_end__*/"b73tz_gg_"),
|
|
10
10
|
/*__reshadow_css_end__*/
|
|
11
11
|
{
|
|
12
|
-
"__SHighlightedBadge": "
|
|
13
|
-
"_use_accent": "
|
|
14
|
-
"_bg": "
|
|
15
|
-
"--bg": "--
|
|
12
|
+
"__SHighlightedBadge": "___SHighlightedBadge_b73tz_gg_",
|
|
13
|
+
"_use_accent": "_use_accent_b73tz_gg_",
|
|
14
|
+
"_bg": "__bg_b73tz_gg_",
|
|
15
|
+
"--bg": "--bg_b73tz"
|
|
16
16
|
});
|
|
17
17
|
class BadgeFHRoot extends Component {
|
|
18
18
|
render() {
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
SHighlightedBadge {
|
|
2
|
-
color: var(--intergalactic-text-primary-invert,
|
|
2
|
+
color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
|
|
3
3
|
}
|
|
4
4
|
|
|
5
5
|
SHighlightedBadge[use='accent'] {
|
|
6
|
-
background-image: var(--intergalactic-control-primary-feature-highlight, linear-gradient(90deg,
|
|
6
|
+
background-image: var(--intergalactic-control-primary-feature-highlight, linear-gradient(90deg in oklch, oklch(0.64 0.223 299.3), oklch(0.74 0.117 274.1)));
|
|
7
7
|
}
|
|
8
8
|
|
|
9
9
|
SHighlightedBadge[bg] {
|
|
@@ -7,17 +7,17 @@ import { createComponent, Root, sstyled, Component } from '@semcore/core';
|
|
|
7
7
|
import SummaryAI from '@semcore/icon/SummaryAI/m';
|
|
8
8
|
import React from 'react';
|
|
9
9
|
/*!__reshadow-styles__:"./button.shadow.css"*/
|
|
10
|
-
const style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".
|
|
10
|
+
const style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___SHighlightedButton_1gg3z_gg_._theme_primary-highlighted_1gg3z_gg_{color:var(--intergalactic-text-primary-invert, rgba(254, 255, 255, 0.949));background-image:linear-gradient(90deg,var(--intergalactic-violet-500, rgb(128, 41, 236)),var(--intergalactic-blue-500, rgb(92, 92, 196)),var(--intergalactic-violet-400, rgb(162, 97, 253)),var(--intergalactic-blue-400, rgb(102, 107, 219)));background-position-x:99%;background-size:300%;transition:background-position-x .3s cubic-bezier(.22,.61,.36,1)}@media (hover:hover){.___SHighlightedButton_1gg3z_gg_._theme_primary-highlighted_1gg3z_gg_:hover{color:var(--intergalactic-text-primary-invert, rgba(254, 255, 255, 0.949));background-position-x:1%}}.___SHighlightedButton_1gg3z_gg_._theme_primary-highlighted_1gg3z_gg_.__active_1gg3z_gg_,.___SHighlightedButton_1gg3z_gg_._theme_primary-highlighted_1gg3z_gg_:active{color:var(--intergalactic-text-primary-invert, rgba(254, 255, 255, 0.949));background-image:var(--intergalactic-control-primary-feature-highlight-active, linear-gradient(90deg in oklch, rgb(162, 97, 253), rgb(102, 107, 219)));background-size:100%}.___SHighlightedButton_1gg3z_gg_._theme_primary-highlighted_1gg3z_gg_:focus-visible{outline:0}.___SHighlightedButton_1gg3z_gg_._theme_secondary-highlighted_1gg3z_gg_{color:var(--intergalactic-icon-primary-feature-highlight, rgb(144, 65, 250));background:var(--intergalactic-control-secondary-feature-highlight, linear-gradient(90deg in oklch, rgb(247, 243, 255), rgb(240, 245, 255))) padding-box,var(--intergalactic-border-feature-highlight-secondary, linear-gradient(90deg in oklch, rgb(192, 142, 255), rgb(148, 165, 245))) border-box;background-origin:border-box;background-clip:padding-box,border-box}@supports (background:linear-gradient(in oklch,red 0%,red 0% 1%,red 2%)) and (color:color(display-p3 0 0 0%)){.___SHighlightedButton_1gg3z_gg_._theme_secondary-highlighted_1gg3z_gg_{background:var(--intergalactic-control-secondary-feature-highlight, linear-gradient(90deg in oklch, rgb(247, 243, 255), rgb(240, 245, 255))) padding-box,var(--intergalactic-border-feature-highlight-secondary, linear-gradient(90deg in oklch, rgb(192, 142, 255), rgb(148, 165, 245))) border-box}@media (color-gamut:p3){.___SHighlightedButton_1gg3z_gg_._theme_secondary-highlighted_1gg3z_gg_{background:var(--intergalactic-control-secondary-feature-highlight, linear-gradient(90deg in oklch, color(display-p3 0.96716 0.95079 0.99961), color(display-p3 0.94438 0.95907 0.99998))) padding-box,var(--intergalactic-border-feature-highlight-secondary, linear-gradient(90deg in oklch, color(display-p3 0.72564 0.56096 0.98326), rgb(148, 165, 245))) border-box}}}.___SHighlightedButton_1gg3z_gg_._theme_secondary-highlighted_1gg3z_gg_ .___SText_1gg3z_gg_{background-color:var(--intergalactic-icon-primary-feature-highlight, rgb(144, 65, 250));background-image:var(--intergalactic-text-feature-highlight, linear-gradient(90deg in oklch, rgb(128, 41, 236), rgb(92, 92, 196)));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}@media (hover:hover){.___SHighlightedButton_1gg3z_gg_._theme_secondary-highlighted_1gg3z_gg_:hover{background:var(--intergalactic-control-secondary-feature-highlight-hover, linear-gradient(90deg in oklch, rgb(230, 213, 255), rgb(207, 221, 255))) padding-box,var(--intergalactic-border-feature-highlight-secondary, linear-gradient(90deg in oklch, rgb(192, 142, 255), rgb(148, 165, 245))) border-box;color:var(--intergalactic-icon-primary-feature-highlight-hover-active, rgb(128, 41, 236))}@supports (background:linear-gradient(in oklch,red 0%,red 0% 1%,red 2%)) and (color:color(display-p3 0 0 0%)){.___SHighlightedButton_1gg3z_gg_._theme_secondary-highlighted_1gg3z_gg_:hover{background:var(--intergalactic-control-secondary-feature-highlight-hover, linear-gradient(90deg in oklch, rgb(230, 213, 255), rgb(207, 221, 255))) padding-box,var(--intergalactic-border-feature-highlight-secondary, linear-gradient(90deg in oklch, rgb(192, 142, 255), rgb(148, 165, 245))) border-box}@media (color-gamut:p3){.___SHighlightedButton_1gg3z_gg_._theme_secondary-highlighted_1gg3z_gg_:hover{background:var(--intergalactic-control-secondary-feature-highlight-hover, linear-gradient(90deg in oklch, color(display-p3 0.89136 0.83496 0.99956), color(display-p3 0.8189 0.86425 1))) padding-box,var(--intergalactic-border-feature-highlight-secondary, linear-gradient(90deg in oklch, color(display-p3 0.72564 0.56096 0.98326), rgb(148, 165, 245))) border-box}}}.___SHighlightedButton_1gg3z_gg_._theme_secondary-highlighted_1gg3z_gg_:hover .___SText_1gg3z_gg_{background-color:var(--intergalactic-icon-primary-feature-highlight-hover-active, rgb(128, 41, 236));background-image:var(--intergalactic-text-feature-highlight-hover-active, linear-gradient(90deg in oklch, rgb(128, 41, 236), rgb(92, 92, 196)))}}.___SHighlightedButton_1gg3z_gg_._theme_secondary-highlighted_1gg3z_gg_.__active_1gg3z_gg_,.___SHighlightedButton_1gg3z_gg_._theme_secondary-highlighted_1gg3z_gg_:active{background:var(--intergalactic-control-secondary-feature-highlight-active, linear-gradient(90deg in oklch, rgb(230, 213, 255), rgb(207, 221, 255))) padding-box,var(--intergalactic-border-feature-highlight-secondary, linear-gradient(90deg in oklch, rgb(192, 142, 255), rgb(148, 165, 245))) border-box;color:var(--intergalactic-icon-primary-feature-highlight-hover-active, rgb(128, 41, 236))}@supports (background:linear-gradient(in oklch,red 0%,red 0% 1%,red 2%)) and (color:color(display-p3 0 0 0%)){.___SHighlightedButton_1gg3z_gg_._theme_secondary-highlighted_1gg3z_gg_.__active_1gg3z_gg_,.___SHighlightedButton_1gg3z_gg_._theme_secondary-highlighted_1gg3z_gg_:active{background:var(--intergalactic-control-secondary-feature-highlight-active, linear-gradient(90deg in oklch, rgb(230, 213, 255), rgb(207, 221, 255))) padding-box,var(--intergalactic-border-feature-highlight-secondary, linear-gradient(90deg in oklch, rgb(192, 142, 255), rgb(148, 165, 245))) border-box}@media (color-gamut:p3){.___SHighlightedButton_1gg3z_gg_._theme_secondary-highlighted_1gg3z_gg_.__active_1gg3z_gg_,.___SHighlightedButton_1gg3z_gg_._theme_secondary-highlighted_1gg3z_gg_:active{background:var(--intergalactic-control-secondary-feature-highlight-active, linear-gradient(90deg in oklch, color(display-p3 0.89136 0.83496 0.99956), color(display-p3 0.8189 0.86425 1))) padding-box,var(--intergalactic-border-feature-highlight-secondary, linear-gradient(90deg in oklch, color(display-p3 0.72564 0.56096 0.98326), rgb(148, 165, 245))) border-box}}}.___SHighlightedButton_1gg3z_gg_._theme_secondary-highlighted_1gg3z_gg_.__active_1gg3z_gg_ .___SText_1gg3z_gg_,.___SHighlightedButton_1gg3z_gg_._theme_secondary-highlighted_1gg3z_gg_:active .___SText_1gg3z_gg_{background-color:var(--intergalactic-icon-primary-feature-highlight-hover-active, rgb(128, 41, 236));background-image:var(--intergalactic-text-feature-highlight-hover-active, linear-gradient(90deg in oklch, rgb(128, 41, 236), rgb(92, 92, 196)))}.___SHighlightedButton_1gg3z_gg_._theme_secondary-highlighted_1gg3z_gg_:focus-visible{outline:0}.___SHighlightedButton_1gg3z_gg_{position:relative}.___SHighlightedButton_1gg3z_gg_::before{content:\"\";position:absolute;z-index:-1;top:0;right:0;bottom:0;left:0;margin:-5px;padding:2px;border-radius:calc(var(--intergalactic-control-rounded, 6px) + 3px);background-image:var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg in oklch, rgb(192, 142, 255), rgb(102, 107, 219)));-webkit-mask:linear-gradient(0deg,#fff,#fff) content-box,linear-gradient(0deg,#fff,#fff);mask:linear-gradient(0deg,#fff,#fff) content-box,linear-gradient(0deg,#fff,#fff);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transform:scale(.96);transition:opacity calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out,transform calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out}@supports (background:linear-gradient(in oklch,red 0%,red 0% 1%,red 2%)) and (color:color(display-p3 0 0 0%)){.___SHighlightedButton_1gg3z_gg_::before{background-image:var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg in oklch, rgb(192, 142, 255), rgb(102, 107, 219)))}@media (color-gamut:p3){.___SHighlightedButton_1gg3z_gg_::before{background-image:var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg in oklch, color(display-p3 0.72564 0.56096 0.98326), rgb(102, 107, 219)))}}}.___SHighlightedButton_1gg3z_gg_._neighborLocation_left_1gg3z_gg_::before{border-top-left-radius:0;border-bottom-left-radius:0}.___SHighlightedButton_1gg3z_gg_._neighborLocation_right_1gg3z_gg_::before{border-top-right-radius:0;border-bottom-right-radius:0}.___SHighlightedButton_1gg3z_gg_._neighborLocation_both_1gg3z_gg_::before{border-radius:0}.___SHighlightedButton_1gg3z_gg_:focus-visible::before{opacity:1;transform:scale(1)}@supports not (-webkit-mask-composite:xor){.___SHighlightedButton_1gg3z_gg_:focus-visible{outline:0;box-shadow:0 0 0 2px #fff,0 0 0 4px #7078fc}.___SHighlightedButton_1gg3z_gg_:focus-visible::before{display:none}}", /*__inner_css_end__*/"1gg3z_gg_"),
|
|
11
11
|
/*__reshadow_css_end__*/
|
|
12
12
|
{
|
|
13
|
-
"__SHighlightedButton": "
|
|
14
|
-
"_theme_primary-highlighted": "_theme_primary-
|
|
15
|
-
"_active": "
|
|
16
|
-
"_theme_secondary-highlighted": "_theme_secondary-
|
|
17
|
-
"__SText": "
|
|
18
|
-
"_neighborLocation_left": "
|
|
19
|
-
"_neighborLocation_right": "
|
|
20
|
-
"_neighborLocation_both": "
|
|
13
|
+
"__SHighlightedButton": "___SHighlightedButton_1gg3z_gg_",
|
|
14
|
+
"_theme_primary-highlighted": "_theme_primary-highlighted_1gg3z_gg_",
|
|
15
|
+
"_active": "__active_1gg3z_gg_",
|
|
16
|
+
"_theme_secondary-highlighted": "_theme_secondary-highlighted_1gg3z_gg_",
|
|
17
|
+
"__SText": "___SText_1gg3z_gg_",
|
|
18
|
+
"_neighborLocation_left": "_neighborLocation_left_1gg3z_gg_",
|
|
19
|
+
"_neighborLocation_right": "_neighborLocation_right_1gg3z_gg_",
|
|
20
|
+
"_neighborLocation_both": "_neighborLocation_both_1gg3z_gg_"
|
|
21
21
|
});
|
|
22
22
|
import { AnimatedSparkles } from '../../inner-components/sparkle/AnimatedSparkles';
|
|
23
23
|
class ButtonFHRoot extends Component {
|
|
@@ -1,23 +1,23 @@
|
|
|
1
1
|
SHighlightedButton[theme='primary-highlighted'] {
|
|
2
|
-
color: var(--intergalactic-text-primary-invert,
|
|
2
|
+
color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
|
|
3
3
|
background-image: linear-gradient(90deg,
|
|
4
|
-
var(--intergalactic-violet-500,
|
|
5
|
-
var(--intergalactic-blue-500,
|
|
6
|
-
var(--intergalactic-violet-400,
|
|
7
|
-
var(--intergalactic-blue-400,
|
|
4
|
+
var(--intergalactic-violet-500, oklch(0.53 0.26 296)),
|
|
5
|
+
var(--intergalactic-blue-500, oklch(0.53 0.157 279.2)),
|
|
6
|
+
var(--intergalactic-violet-400, oklch(0.64 0.223 299.3)),
|
|
7
|
+
var(--intergalactic-blue-400, oklch(0.58 0.168 278.2)));
|
|
8
8
|
background-position-x: 99%;
|
|
9
9
|
background-size: 300%;
|
|
10
10
|
transition: background-position-x 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
|
|
11
11
|
|
|
12
12
|
&:hover {
|
|
13
|
-
color: var(--intergalactic-text-primary-invert,
|
|
13
|
+
color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
|
|
14
14
|
background-position-x: 1%;
|
|
15
15
|
}
|
|
16
16
|
|
|
17
17
|
&:active,
|
|
18
18
|
&[active] {
|
|
19
|
-
color: var(--intergalactic-text-primary-invert,
|
|
20
|
-
background-image: var(--intergalactic-control-primary-feature-highlight-active, linear-gradient(90deg,
|
|
19
|
+
color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
|
|
20
|
+
background-image: var(--intergalactic-control-primary-feature-highlight-active, linear-gradient(90deg in oklch, oklch(0.64 0.223 299.3), oklch(0.58 0.168 278.2)));
|
|
21
21
|
background-size: 100%;
|
|
22
22
|
}
|
|
23
23
|
|
|
@@ -27,45 +27,45 @@ SHighlightedButton[theme='primary-highlighted'] {
|
|
|
27
27
|
}
|
|
28
28
|
|
|
29
29
|
SHighlightedButton[theme='secondary-highlighted'] {
|
|
30
|
-
color: var(--intergalactic-icon-primary-feature-highlight,
|
|
30
|
+
color: var(--intergalactic-icon-primary-feature-highlight, oklch(0.58 0.254 297.1));
|
|
31
31
|
|
|
32
32
|
background:
|
|
33
|
-
var(--intergalactic-control-secondary-feature-highlight, linear-gradient(90deg,
|
|
34
|
-
var(--intergalactic-border-feature-highlight-secondary, linear-gradient(90deg,
|
|
33
|
+
var(--intergalactic-control-secondary-feature-highlight, linear-gradient(90deg in oklch, oklch(0.97 0.019 303.4), oklch(0.969 0.016 267.7))) padding-box,
|
|
34
|
+
var(--intergalactic-border-feature-highlight-secondary, linear-gradient(90deg in oklch, oklch(0.74 0.17 303), oklch(0.74 0.117 274.1))) border-box;
|
|
35
35
|
background-origin: border-box;
|
|
36
36
|
background-clip: padding-box, border-box;
|
|
37
37
|
|
|
38
38
|
& SText {
|
|
39
|
-
background-color: var(--intergalactic-icon-primary-feature-highlight,
|
|
40
|
-
background-image: var(--intergalactic-text-feature-highlight, linear-gradient(90deg,
|
|
39
|
+
background-color: var(--intergalactic-icon-primary-feature-highlight, oklch(0.58 0.254 297.1));
|
|
40
|
+
background-image: var(--intergalactic-text-feature-highlight, linear-gradient(90deg in oklch, oklch(0.53 0.26 296), oklch(0.53 0.157 279.2)));
|
|
41
41
|
background-clip: text;
|
|
42
42
|
-webkit-text-fill-color: transparent;
|
|
43
43
|
}
|
|
44
44
|
|
|
45
45
|
&:hover {
|
|
46
46
|
background:
|
|
47
|
-
var(--intergalactic-control-secondary-feature-highlight-hover, linear-gradient(90deg,
|
|
48
|
-
var(--intergalactic-border-feature-highlight-secondary, linear-gradient(90deg,
|
|
47
|
+
var(--intergalactic-control-secondary-feature-highlight-hover, linear-gradient(90deg in oklch, oklch(0.9 0.065 303), oklch(0.898 0.054 268.3))) padding-box,
|
|
48
|
+
var(--intergalactic-border-feature-highlight-secondary, linear-gradient(90deg in oklch, oklch(0.74 0.17 303), oklch(0.74 0.117 274.1))) border-box;
|
|
49
49
|
|
|
50
|
-
color: var(--intergalactic-icon-primary-feature-highlight-hover-active,
|
|
50
|
+
color: var(--intergalactic-icon-primary-feature-highlight-hover-active, oklch(0.53 0.26 296));
|
|
51
51
|
|
|
52
52
|
& SText {
|
|
53
|
-
background-color: var(--intergalactic-icon-primary-feature-highlight-hover-active,
|
|
54
|
-
background-image: var(--intergalactic-text-feature-highlight-hover-active, linear-gradient(90deg,
|
|
53
|
+
background-color: var(--intergalactic-icon-primary-feature-highlight-hover-active, oklch(0.53 0.26 296));
|
|
54
|
+
background-image: var(--intergalactic-text-feature-highlight-hover-active, linear-gradient(90deg in oklch, oklch(0.53 0.26 296), oklch(0.53 0.157 279.2)));
|
|
55
55
|
}
|
|
56
56
|
}
|
|
57
57
|
|
|
58
58
|
&:active,
|
|
59
59
|
&[active] {
|
|
60
60
|
background:
|
|
61
|
-
var(--intergalactic-control-secondary-feature-highlight-active, linear-gradient(90deg,
|
|
62
|
-
var(--intergalactic-border-feature-highlight-secondary, linear-gradient(90deg,
|
|
61
|
+
var(--intergalactic-control-secondary-feature-highlight-active, linear-gradient(90deg in oklch, oklch(0.9 0.065 303), oklch(0.898 0.054 268.3))) padding-box,
|
|
62
|
+
var(--intergalactic-border-feature-highlight-secondary, linear-gradient(90deg in oklch, oklch(0.74 0.17 303), oklch(0.74 0.117 274.1))) border-box;
|
|
63
63
|
|
|
64
|
-
color: var(--intergalactic-icon-primary-feature-highlight-hover-active,
|
|
64
|
+
color: var(--intergalactic-icon-primary-feature-highlight-hover-active, oklch(0.53 0.26 296));
|
|
65
65
|
|
|
66
66
|
& SText {
|
|
67
|
-
background-color: var(--intergalactic-icon-primary-feature-highlight-hover-active,
|
|
68
|
-
background-image: var(--intergalactic-text-feature-highlight-hover-active, linear-gradient(90deg,
|
|
67
|
+
background-color: var(--intergalactic-icon-primary-feature-highlight-hover-active, oklch(0.53 0.26 296));
|
|
68
|
+
background-image: var(--intergalactic-text-feature-highlight-hover-active, linear-gradient(90deg in oklch, oklch(0.53 0.26 296), oklch(0.53 0.157 279.2)));
|
|
69
69
|
}
|
|
70
70
|
}
|
|
71
71
|
|
|
@@ -87,7 +87,7 @@ SHighlightedButton {
|
|
|
87
87
|
padding: 2px;
|
|
88
88
|
border-radius: calc(var(--intergalactic-control-rounded, 6px) + 3px);
|
|
89
89
|
|
|
90
|
-
background-image: var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg,
|
|
90
|
+
background-image: var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg in oklch, oklch(0.74 0.17 303), oklch(0.58 0.168 278.2)));
|
|
91
91
|
|
|
92
92
|
mask: linear-gradient(0deg, #fff, #fff) content-box, linear-gradient(0deg, #fff, #fff);
|
|
93
93
|
mask-composite: exclude;
|
|
@@ -5,11 +5,11 @@ import Checkbox from '@semcore/checkbox';
|
|
|
5
5
|
import { Component, createComponent, Root, sstyled } from '@semcore/core';
|
|
6
6
|
import React from 'react';
|
|
7
7
|
/*!__reshadow-styles__:"./checkbox.shadow.css"*/
|
|
8
|
-
const style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".
|
|
8
|
+
const style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___SHighlightedCheckbox_zq7su_gg_:not(._state_invalid_zq7su_gg_) [data-ui-name=\"Value.CheckMark\"]{position:relative;transform:translate(0);border:1px solid transparent;border-radius:var(--intergalactic-addon-rounded, 4px);background:linear-gradient(white,white) padding-box,var(--intergalactic-border-feature-highlight, linear-gradient(90deg in oklch, rgb(210, 179, 255), rgb(176, 193, 254))) border-box;background-origin:border-box;background-clip:padding-box,border-box}@supports (background:linear-gradient(in oklch,red 0%,red 0% 1%,red 2%)) and (color:color(display-p3 0 0 0%)){.___SHighlightedCheckbox_zq7su_gg_:not(._state_invalid_zq7su_gg_) [data-ui-name=\"Value.CheckMark\"]{background:linear-gradient(white,white) padding-box,var(--intergalactic-border-feature-highlight, linear-gradient(90deg in oklch, rgb(210, 179, 255), rgb(176, 193, 254))) border-box}@media (color-gamut:p3){.___SHighlightedCheckbox_zq7su_gg_:not(._state_invalid_zq7su_gg_) [data-ui-name=\"Value.CheckMark\"]{background:linear-gradient(white,white) padding-box,var(--intergalactic-border-feature-highlight, linear-gradient(90deg in oklch, color(display-p3 0.80738 0.70018 0.99486), rgb(176, 193, 254))) border-box}}}.___SHighlightedCheckbox_zq7su_gg_:not(._state_invalid_zq7su_gg_) input[data-ui-name=\"CheckboxFH.Value\"]:checked+[data-ui-name=\"Value.CheckMark\"]{border-color:transparent;background:var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg in oklch, rgb(192, 142, 255), rgb(148, 165, 245))) padding-box,var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg in oklch, rgb(192, 142, 255), rgb(148, 165, 245))) border-box}@supports (background:linear-gradient(in oklch,red 0%,red 0% 1%,red 2%)) and (color:color(display-p3 0 0 0%)){.___SHighlightedCheckbox_zq7su_gg_:not(._state_invalid_zq7su_gg_) input[data-ui-name=\"CheckboxFH.Value\"]:checked+[data-ui-name=\"Value.CheckMark\"]{background:var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg in oklch, rgb(192, 142, 255), rgb(148, 165, 245))) padding-box,var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg in oklch, rgb(192, 142, 255), rgb(148, 165, 245))) border-box}@media (color-gamut:p3){.___SHighlightedCheckbox_zq7su_gg_:not(._state_invalid_zq7su_gg_) input[data-ui-name=\"CheckboxFH.Value\"]:checked+[data-ui-name=\"Value.CheckMark\"]{background:var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg in oklch, color(display-p3 0.72564 0.56096 0.98326), rgb(148, 165, 245))) padding-box,var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg in oklch, color(display-p3 0.72564 0.56096 0.98326), rgb(148, 165, 245))) border-box}}}.___SHighlightedCheckbox_zq7su_gg_:not(._state_invalid_zq7su_gg_) [data-ui-name=\"Value.CheckMark\"]::before{content:\"\";position:absolute;z-index:-1;top:0;right:0;bottom:0;left:0;margin:-5px;padding:1px;border-width:2px;border-radius:calc(var(--intergalactic-addon-rounded, 4px) + 3px);border-color:transparent;pointer-events:none;background:linear-gradient(white,white) padding-box,var(--intergalactic-border-feature-highlight, linear-gradient(90deg in oklch, rgb(210, 179, 255), rgb(176, 193, 254))) border-box;-webkit-mask:linear-gradient(0deg,#fff,#fff) content-box,linear-gradient(0deg,#fff,#fff);mask:linear-gradient(0deg,#fff,#fff) content-box,linear-gradient(0deg,#fff,#fff);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transform:scale(.9);transition:opacity calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out,transform calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out}@supports (background:linear-gradient(in oklch,red 0%,red 0% 1%,red 2%)) and (color:color(display-p3 0 0 0%)){.___SHighlightedCheckbox_zq7su_gg_:not(._state_invalid_zq7su_gg_) [data-ui-name=\"Value.CheckMark\"]::before{background:linear-gradient(white,white) padding-box,var(--intergalactic-border-feature-highlight, linear-gradient(90deg in oklch, rgb(210, 179, 255), rgb(176, 193, 254))) border-box}@media (color-gamut:p3){.___SHighlightedCheckbox_zq7su_gg_:not(._state_invalid_zq7su_gg_) [data-ui-name=\"Value.CheckMark\"]::before{background:linear-gradient(white,white) padding-box,var(--intergalactic-border-feature-highlight, linear-gradient(90deg in oklch, color(display-p3 0.80738 0.70018 0.99486), rgb(176, 193, 254))) border-box}}}.___SHighlightedCheckbox_zq7su_gg_:not(._state_invalid_zq7su_gg_) input[data-ui-name=\"CheckboxFH.Value\"]:checked:not(:focus-visible)+[data-ui-name=\"Value.CheckMark\"]::before{opacity:0;transform:scale(.9)}.___SHighlightedCheckbox_zq7su_gg_:not(._state_invalid_zq7su_gg_) input[data-ui-name=\"CheckboxFH.Value\"]:focus-visible+[data-ui-name=\"Value.CheckMark\"]::before{opacity:1;transform:scale(1)}.___SHighlightedCheckbox_zq7su_gg_:not(._state_invalid_zq7su_gg_) input[data-ui-name=\"CheckboxFH.Value\"]:checked:focus-visible+[data-ui-name=\"Value.CheckMark\"]::before{border-color:transparent;background:linear-gradient(white,white) padding-box,var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg in oklch, rgb(192, 142, 255), rgb(148, 165, 245))) border-box}@supports (background:linear-gradient(in oklch,red 0%,red 0% 1%,red 2%)) and (color:color(display-p3 0 0 0%)){.___SHighlightedCheckbox_zq7su_gg_:not(._state_invalid_zq7su_gg_) input[data-ui-name=\"CheckboxFH.Value\"]:checked:focus-visible+[data-ui-name=\"Value.CheckMark\"]::before{background:linear-gradient(white,white) padding-box,var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg in oklch, rgb(192, 142, 255), rgb(148, 165, 245))) border-box}@media (color-gamut:p3){.___SHighlightedCheckbox_zq7su_gg_:not(._state_invalid_zq7su_gg_) input[data-ui-name=\"CheckboxFH.Value\"]:checked:focus-visible+[data-ui-name=\"Value.CheckMark\"]::before{background:linear-gradient(white,white) padding-box,var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg in oklch, color(display-p3 0.72564 0.56096 0.98326), rgb(148, 165, 245))) border-box}}}", /*__inner_css_end__*/"zq7su_gg_"),
|
|
9
9
|
/*__reshadow_css_end__*/
|
|
10
10
|
{
|
|
11
|
-
"__SHighlightedCheckbox": "
|
|
12
|
-
"_state_invalid": "
|
|
11
|
+
"__SHighlightedCheckbox": "___SHighlightedCheckbox_zq7su_gg_",
|
|
12
|
+
"_state_invalid": "_state_invalid_zq7su_gg_"
|
|
13
13
|
});
|
|
14
14
|
import { AnimatedSparkles } from '../../inner-components/sparkle/AnimatedSparkles';
|
|
15
15
|
class CheckboxFHRoot extends Component {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.js","names":["Checkbox","Component","createComponent","Root","sstyled","React","style","_sstyled","insert","AnimatedSparkles","CheckboxFHRoot","constructor","args","_defineProperty","createRef","getValueProps","ref","inputRef","onChange","setTimeout","forceUpdate","getAnimatedSparklesProps","size","asProps","checked","current","show","top","left","render","_ref","_ref2","SHighlightedCheckbox","styles","Children","children","hasChildren","createElement","cn","_assignProps","Fragment","CheckboxFH","Value","Text"],"sources":["../../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import type {
|
|
1
|
+
{"version":3,"file":"Checkbox.js","names":["Checkbox","Component","createComponent","Root","sstyled","React","style","_sstyled","insert","AnimatedSparkles","CheckboxFHRoot","constructor","args","_defineProperty","createRef","getValueProps","ref","inputRef","onChange","setTimeout","forceUpdate","getAnimatedSparklesProps","size","asProps","checked","current","show","top","left","render","_ref","_ref2","SHighlightedCheckbox","styles","Children","children","hasChildren","createElement","cn","_assignProps","Fragment","CheckboxFH","Value","Text"],"sources":["../../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import type { NSCheckbox } from '@semcore/checkbox';\nimport Checkbox from '@semcore/checkbox';\nimport { Component, createComponent, Root, sstyled } from '@semcore/core';\nimport React from 'react';\n\nimport style from './checkbox.shadow.css';\nimport type { HighlightedCheckboxComponent } from './Checkbox.type';\nimport { AnimatedSparkles } from '../../inner-components/sparkle/AnimatedSparkles';\n\nclass CheckboxFHRoot extends Component<NSCheckbox.Props> {\n static displayName = 'CheckboxFH';\n static style = style;\n\n inputRef = React.createRef<HTMLInputElement>();\n\n getValueProps() {\n return {\n ref: this.inputRef,\n onChange: () => {\n setTimeout(() => {\n this.forceUpdate();\n });\n },\n };\n }\n\n getAnimatedSparklesProps() {\n const { size } = this.asProps;\n const checked = this.inputRef.current?.checked;\n\n return {\n show: checked,\n top: size === 'l' ? '7px' : '5px',\n left: size === 'l' ? '5px' : '3px',\n };\n }\n\n render() {\n const SHighlightedCheckbox = Root;\n const { styles, Children, children: hasChildren } = this.asProps;\n\n return sstyled(styles)(\n <SHighlightedCheckbox render={Checkbox}>\n {hasChildren\n ? <Children />\n : (\n <>\n <CheckboxFH.Value />\n <CheckboxFH.Text />\n </>\n )}\n </SHighlightedCheckbox>,\n );\n }\n}\n\nexport const CheckboxFH = createComponent(CheckboxFHRoot, {\n Text: Checkbox.Text,\n Value: Checkbox.Value,\n AnimatedSparkles,\n}) as HighlightedCheckboxComponent;\n"],"mappings":";;;AACA,OAAOA,QAAQ,MAAM,mBAAmB;AACxC,SAASC,SAAS,EAAEC,eAAe,EAAEC,IAAI,EAAEC,OAAO,QAAQ,eAAe;AACzE,OAAOC,KAAK,MAAM,OAAO;AAAC;AAAA,MAAAC,KAAA,8BAAAC,QAAA,CAAAC,MAAA;AAAA;AAAA;EAAA;EAAA;AAAA;AAI1B,SAASC,gBAAgB,QAAQ,iDAAiD;AAElF,MAAMC,cAAc,SAAST,SAAS,CAAmB;EAAAU,YAAA,GAAAC,IAAA;IAAA,SAAAA,IAAA;IAAAC,eAAA,gCAI5CR,KAAK,CAACS,SAAS,CAAmB,CAAC;EAAA;EAE9CC,aAAaA,CAAA,EAAG;IACd,OAAO;MACLC,GAAG,EAAE,IAAI,CAACC,QAAQ;MAClBC,QAAQ,EAAEA,CAAA,KAAM;QACdC,UAAU,CAAC,MAAM;UACf,IAAI,CAACC,WAAW,CAAC,CAAC;QACpB,CAAC,CAAC;MACJ;IACF,CAAC;EACH;EAEAC,wBAAwBA,CAAA,EAAG;IACzB,MAAM;MAAEC;IAAK,CAAC,GAAG,IAAI,CAACC,OAAO;IAC7B,MAAMC,OAAO,GAAG,IAAI,CAACP,QAAQ,CAACQ,OAAO,EAAED,OAAO;IAE9C,OAAO;MACLE,IAAI,EAAEF,OAAO;MACbG,GAAG,EAAEL,IAAI,KAAK,GAAG,GAAG,KAAK,GAAG,KAAK;MACjCM,IAAI,EAAEN,IAAI,KAAK,GAAG,GAAG,KAAK,GAAG;IAC/B,CAAC;EACH;EAEAO,MAAMA,CAAA,EAAG;IAAA,IAAAC,IAAA,QAAAP,OAAA;MAAAQ,KAAA;IACP,MAAMC,oBAAoB,GAIMhC,QAAQ;IAHxC,MAAM;MAAEiC,MAAM;MAAEC,QAAQ;MAAEC,QAAQ,EAAEC;IAAY,CAAC,GAAG,IAAI,CAACb,OAAO;IAEhE,OAAAQ,KAAA,GAAO3B,OAAO,CAAC6B,MAAM,CAAC,eACpB5B,KAAA,CAAAgC,aAAA,CAACL,oBAAoB,EAAAD,KAAA,CAAAO,EAAA;MAAA,GAAAC,YAAA,KAAAT,IAAA;IAAA,IAClBM,WAAW,gBACR/B,KAAA,CAAAgC,aAAA,CAACH,QAAQ,EAAAH,KAAA,CAAAO,EAAA,gBAAE,CAAC,gBAEVjC,KAAA,CAAAgC,aAAA,CAAAhC,KAAA,CAAAmC,QAAA,qBACEnC,KAAA,CAAAgC,aAAA,CAACI,UAAU,CAACC,KAAK,MAAE,CAAC,eACpBrC,KAAA,CAAAgC,aAAA,CAACI,UAAU,CAACE,IAAI,MAAE,CAClB,CAEY,CAAC;EAE3B;AACF;AAAC9B,eAAA,CA7CKH,cAAc,iBACG,YAAY;AAAAG,eAAA,CAD7BH,cAAc,WAEHJ,KAAK;AA6CtB,OAAO,MAAMmC,UAAU,GAAGvC,eAAe,CAACQ,cAAc,EAAE;EACxDiC,IAAI,EAAE3C,QAAQ,CAAC2C,IAAI;EACnBD,KAAK,EAAE1C,QAAQ,CAAC0C,KAAK;EACrBjC;AACF,CAAC,CAAiC","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.type.js","names":[],"sources":["../../../../src/components/checkbox/Checkbox.type.ts"],"sourcesContent":["import type {
|
|
1
|
+
{"version":3,"file":"Checkbox.type.js","names":[],"sources":["../../../../src/components/checkbox/Checkbox.type.ts"],"sourcesContent":["import type { NSCheckbox } from '@semcore/checkbox';\nimport type { Intergalactic } from '@semcore/core';\n\nimport type { AnimatedSparklesProps } from '../../inner-components/sparkle/AnimatedSparkles';\n\nexport type HighlightedCheckboxComponent = Intergalactic.Component<'label', NSCheckbox.Props, NSCheckbox.Ctx> & {\n Text: Intergalactic.Component<'span', NSCheckbox.Text.Props>;\n Value: Intergalactic.Component<'input', NSCheckbox.Value.Props>;\n AnimatedSparkles: Intergalactic.Component<'div', AnimatedSparklesProps>;\n};\n"],"mappings":"","ignoreList":[]}
|
|
@@ -1,17 +1,20 @@
|
|
|
1
1
|
SHighlightedCheckbox:not([state="invalid"]) {
|
|
2
2
|
[data-ui-name="Value.CheckMark"] {
|
|
3
|
+
position: relative;
|
|
4
|
+
transform: translate(0);
|
|
5
|
+
|
|
3
6
|
border: 1px solid transparent;
|
|
4
7
|
border-radius: var(--intergalactic-addon-rounded, 4px);
|
|
5
8
|
background: linear-gradient(white, white) padding-box,
|
|
6
|
-
var(--intergalactic-border-feature-highlight, linear-gradient(90deg,
|
|
9
|
+
var(--intergalactic-border-feature-highlight, linear-gradient(90deg in oklch, oklch(0.82 0.118 303), oklch(0.82 0.088 272.1))) border-box;
|
|
7
10
|
background-origin: border-box;
|
|
8
11
|
background-clip: padding-box, border-box;
|
|
9
12
|
}
|
|
10
13
|
|
|
11
14
|
input[data-ui-name="CheckboxFH.Value"]:checked + [data-ui-name="Value.CheckMark"] {
|
|
12
15
|
border-color: transparent;
|
|
13
|
-
background: var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg,
|
|
14
|
-
var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg,
|
|
16
|
+
background: var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg in oklch, oklch(0.74 0.17 303), oklch(0.74 0.117 274.1))) padding-box,
|
|
17
|
+
var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg in oklch, oklch(0.74 0.17 303), oklch(0.74 0.117 274.1))) border-box;
|
|
15
18
|
}
|
|
16
19
|
|
|
17
20
|
[data-ui-name="Value.CheckMark"]::before {
|
|
@@ -25,7 +28,7 @@ SHighlightedCheckbox:not([state="invalid"]) {
|
|
|
25
28
|
border-radius: calc(var(--intergalactic-addon-rounded, 4px) + 3px);
|
|
26
29
|
border-color: transparent;
|
|
27
30
|
pointer-events: none;
|
|
28
|
-
background: linear-gradient(white, white) padding-box, var(--intergalactic-border-feature-highlight, linear-gradient(90deg,
|
|
31
|
+
background: linear-gradient(white, white) padding-box, var(--intergalactic-border-feature-highlight, linear-gradient(90deg in oklch, oklch(0.82 0.118 303), oklch(0.82 0.088 272.1))) border-box;
|
|
29
32
|
mask: linear-gradient(0deg, #fff, #fff) content-box, linear-gradient(0deg, #fff, #fff);
|
|
30
33
|
mask-composite: exclude;
|
|
31
34
|
|
|
@@ -49,6 +52,6 @@ SHighlightedCheckbox:not([state="invalid"]) {
|
|
|
49
52
|
|
|
50
53
|
input[data-ui-name="CheckboxFH.Value"]:checked:focus-visible+[data-ui-name="Value.CheckMark"]::before {
|
|
51
54
|
border-color: transparent;
|
|
52
|
-
background: linear-gradient(white, white) padding-box, var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg,
|
|
55
|
+
background: linear-gradient(white, white) padding-box, var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg in oklch, oklch(0.74 0.17 303), oklch(0.74 0.117 274.1))) border-box;
|
|
53
56
|
}
|
|
54
57
|
}
|