@oneli8/react 1.0.0-beta.2 → 1.0.0-beta.4
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/AGENTS.md +12 -0
- package/PRINCIPLES.md +48 -0
- package/README.md +61 -75
- package/ai-context.json +146 -0
- package/package.json +30 -24
- package/skills/oneli8-figma-to-code/SKILL.md +25 -0
- package/skills/oneli8-icons/SKILL.md +24 -0
- package/skills/oneli8-ui/SKILL.md +24 -0
- package/src/atoms/Icon.js +31 -29
- package/src/atoms/SelectionIndicator.js +43 -0
- package/src/foundations/geometry.js +72 -0
- package/src/foundations/icons.generated.d.ts +38 -0
- package/src/foundations/icons.generated.js +406 -0
- package/src/index.d.ts +167 -4
- package/src/index.js +9 -4
- package/src/molecules/Button.js +47 -18
- package/src/molecules/ChoiceItem.js +55 -0
- package/src/molecules/IconButton.js +31 -16
- package/src/molecules/SelectionOption.js +41 -0
- package/src/organisms/ChoiceGroup.js +78 -0
- package/src/styles/button.css +195 -0
- package/src/styles/choice-group.css +95 -0
- package/src/styles/choice-item.css +192 -0
- package/src/styles/gem.css +173 -0
- package/src/styles/icon-button.css +224 -0
- package/src/styles/icon.css +56 -0
- package/src/styles/selection-indicator.css +153 -0
- package/src/styles/selection-option.css +123 -0
- package/styles.css +12 -6
- package/src/Button.d.ts +0 -20
- package/src/Button.js +0 -1
- package/src/Icon.d.ts +0 -4
- package/src/Icon.js +0 -1
- package/src/IconButton.d.ts +0 -20
- package/src/IconButton.js +0 -1
- package/src/Link.d.ts +0 -16
- package/src/Link.js +0 -1
- package/src/atoms/AnchorControl.js +0 -7
- package/src/atoms/BusyIndicator.js +0 -6
- package/src/atoms/ButtonControl.js +0 -14
- package/src/atoms/IconFrame.js +0 -19
- package/src/atoms/Label.js +0 -5
- package/src/foundations/collection.js +0 -13
- package/src/foundations/runtime.js +0 -44
- package/src/molecules/Link.js +0 -14
- package/styles/accessibility.css +0 -1
- package/styles/button.css +0 -176
- package/styles/gem-control-focus.css +0 -33
- package/styles/icon-button.css +0 -42
- package/styles/icon-frame.css +0 -1
- package/styles/link.css +0 -20
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import {createElement,forwardRef} from "react";
|
|
2
|
-
import {cx,valid} from "../foundations/runtime.js";
|
|
3
|
-
|
|
4
|
-
export const buttonVariants=new Set(["primary","secondary","quiet","destructive"]);
|
|
5
|
-
export const buttonSizes=new Set(["compact","standard","comfortable","large"]);
|
|
6
|
-
export const buttonMaterials=new Set(["regular","gem"]);
|
|
7
|
-
|
|
8
|
-
export const ButtonControl=forwardRef(function ButtonControl({as="button",baseClass,variant="primary",size="comfortable",material="regular",loading=false,disabled=false,pressed,className="",type="button",onClick,children,...rest},ref){
|
|
9
|
-
const toggleProps=typeof pressed==="boolean"?{"aria-pressed":pressed}:{};
|
|
10
|
-
const handleClick=event=>{if(loading){event.preventDefault();event.stopPropagation();return;}onClick?.(event)};
|
|
11
|
-
return createElement(as,{...rest,...toggleProps,ref,type,disabled,"aria-busy":loading||undefined,"aria-disabled":loading||disabled||undefined,
|
|
12
|
-
"data-ol8-variant":valid(buttonVariants,variant,"primary"),"data-ol8-size":valid(buttonSizes,size,"comfortable"),"data-ol8-material":valid(buttonMaterials,material,"regular"),
|
|
13
|
-
className:cx(baseClass,className),onClick:handleClick},children);
|
|
14
|
-
});
|
package/src/atoms/IconFrame.js
DELETED
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import {createElement} from "react";
|
|
2
|
-
|
|
3
|
-
const presentations=new Set(["micro","compact","small","standard","medium","large","xlarge","spacious","display","hero","landmark"]);
|
|
4
|
-
|
|
5
|
-
export function iconFrameSizeForControl(size,{large="standard"}={}){
|
|
6
|
-
if(size==="compact"||size==="standard")return "small";
|
|
7
|
-
if(size==="large")return large;
|
|
8
|
-
return "standard";
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
export function iconFrameSizeForChoice(size){
|
|
12
|
-
return size==="comfortable"||size==="large"?"compact":"micro";
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
export function IconFrame({children,className="ol8-NavigationItem__icon",size="standard"}){
|
|
16
|
-
if(!children)return null;
|
|
17
|
-
const resolvedSize=presentations.has(size)?size:"standard";
|
|
18
|
-
return createElement("span",{className:["ol8-IconFrame",className].filter(Boolean).join(" "),"data-ol8-icon-size":resolvedSize,"aria-hidden":"true"},children);
|
|
19
|
-
}
|
package/src/atoms/Label.js
DELETED
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
export const enabledIndexes=items=>items.map((item,index)=>item.disabled?null:index).filter(index=>index!==null);
|
|
2
|
-
|
|
3
|
-
export const nextEnabled=(items,current,direction)=>{
|
|
4
|
-
const enabled=enabledIndexes(items);
|
|
5
|
-
if(!enabled.length)return current;
|
|
6
|
-
const position=Math.max(0,enabled.indexOf(current));
|
|
7
|
-
return enabled[(position+direction+enabled.length)%enabled.length];
|
|
8
|
-
};
|
|
9
|
-
|
|
10
|
-
export const rovingIndex=(items,value)=>{
|
|
11
|
-
const selected=items.findIndex(item=>item.value===value&&!item.disabled);
|
|
12
|
-
return selected>=0?selected:(enabledIndexes(items)[0]??-1);
|
|
13
|
-
};
|
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
import {useEffect,useState} from "react";
|
|
2
|
-
export {enabledIndexes,nextEnabled,rovingIndex} from "./collection.js";
|
|
3
|
-
|
|
4
|
-
export const navigationSizes=new Set(["compact","standard","comfortable","large"]);
|
|
5
|
-
export const navigationMaterials=new Set(["regular","gem"]);
|
|
6
|
-
export const tabHierarchies=new Set(["primary","secondary","tertiary"]);
|
|
7
|
-
export const tabOrientations=new Set(["horizontal","vertical"]);
|
|
8
|
-
export const tabActivations=new Set(["automatic","manual"]);
|
|
9
|
-
export const tabOverflows=new Set(["none","scroll"]);
|
|
10
|
-
export const segmentBehaviors=new Set(["single","multi","momentary"]);
|
|
11
|
-
export const segmentPresentations=new Set(["fill","line","outline","pill","icons","stacked"]);
|
|
12
|
-
export const segmentWidths=new Set(["equal","content"]);
|
|
13
|
-
export const tabBarPresentations=new Set(["bottom","inline","sidebar","spatial"]);
|
|
14
|
-
export const choiceSizes=navigationSizes;
|
|
15
|
-
export const choiceMaterials=navigationMaterials;
|
|
16
|
-
|
|
17
|
-
export const valid=(set,value,fallback)=>set.has(value)?value:fallback;
|
|
18
|
-
export const cx=(...values)=>values.filter(Boolean).join(" ");
|
|
19
|
-
export const assignRef=(ref,value)=>{if(typeof ref==="function")ref(value);else if(ref)ref.current=value;};
|
|
20
|
-
export function useControllableValue(value,defaultValue,onValueChange){
|
|
21
|
-
const [internal,setInternal]=useState(defaultValue);
|
|
22
|
-
const controlled=value!==undefined;
|
|
23
|
-
const selected=controlled?value:internal;
|
|
24
|
-
const setSelected=next=>{
|
|
25
|
-
if(!controlled)setInternal(next);
|
|
26
|
-
onValueChange?.(next);
|
|
27
|
-
};
|
|
28
|
-
return [selected,setSelected];
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
export function useNativeCheckedState(checked,defaultChecked,inputRef){
|
|
32
|
-
const controlled=checked!==undefined;
|
|
33
|
-
const [internal,setInternal]=useState(Boolean(defaultChecked));
|
|
34
|
-
useEffect(()=>{
|
|
35
|
-
if(controlled)return;
|
|
36
|
-
const input=inputRef.current;
|
|
37
|
-
const form=input?.form;
|
|
38
|
-
if(!form)return;
|
|
39
|
-
const synchronize=()=>queueMicrotask(()=>setInternal(Boolean(input.checked)));
|
|
40
|
-
form.addEventListener("reset",synchronize);
|
|
41
|
-
return ()=>form.removeEventListener("reset",synchronize);
|
|
42
|
-
},[controlled,inputRef]);
|
|
43
|
-
return [controlled?Boolean(checked):internal,next=>{if(!controlled)setInternal(Boolean(next))}];
|
|
44
|
-
}
|
package/src/molecules/Link.js
DELETED
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import {createElement,forwardRef} from "react";
|
|
2
|
-
import {AnchorControl} from "../atoms/AnchorControl.js";
|
|
3
|
-
import {Label} from "../atoms/Label.js";
|
|
4
|
-
|
|
5
|
-
const forms=new Set(["inline","standalone","navigation"]);
|
|
6
|
-
const sizes=new Set(["small","standard","large","inherit"]);
|
|
7
|
-
const motions=new Set(["system","none"]);
|
|
8
|
-
|
|
9
|
-
export const Link=forwardRef(function Link({children,href,form="inline",size="standard",current,motion="system",className="",...rest},ref){
|
|
10
|
-
return createElement(AnchorControl,{...rest,ref,href,current,className:["ol8-Link",className].filter(Boolean).join(" "),
|
|
11
|
-
"data-ol8-form":forms.has(form)?form:"inline","data-ol8-size":sizes.has(size)?size:"standard","data-ol8-motion":motions.has(motion)?motion:"system"},
|
|
12
|
-
createElement(Label,{className:"ol8-Link__label"},children)
|
|
13
|
-
);
|
|
14
|
-
});
|
package/styles/accessibility.css
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
.ol8-LiveRegion{position:absolute;inline-size:var(--ol8-border-width-hairline);block-size:var(--ol8-border-width-hairline);margin:calc(var(--ol8-border-width-hairline)*-1);overflow:hidden;clip-path:inset(50%);white-space:nowrap}
|
package/styles/button.css
DELETED
|
@@ -1,176 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
.ol8-Button{
|
|
3
|
-
position:relative;
|
|
4
|
-
display:inline-flex;
|
|
5
|
-
align-items:center;
|
|
6
|
-
justify-content:center;
|
|
7
|
-
gap:var(--ol8-component-button-gap-comfortable);
|
|
8
|
-
min-inline-size:var(--ol8-component-button-target-comfortable);
|
|
9
|
-
border-style:solid;
|
|
10
|
-
border-color:transparent;
|
|
11
|
-
font-family:var(--ol8-font-family-functional);
|
|
12
|
-
font-weight:var(--ol8-font-weight-semibold);
|
|
13
|
-
text-align:center;
|
|
14
|
-
text-decoration:none;
|
|
15
|
-
white-space:nowrap;
|
|
16
|
-
cursor:pointer;
|
|
17
|
-
box-shadow:var(--ol8-elevation-surface-flat);
|
|
18
|
-
transition-property:background-color,border-color,color,box-shadow;
|
|
19
|
-
transition-duration:var(--ol8-motion-interaction-hover-duration);
|
|
20
|
-
transition-timing-function:var(--ol8-motion-interaction-hover-timing-function);
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
.ol8-Button::before{
|
|
24
|
-
content:"";
|
|
25
|
-
position:absolute;
|
|
26
|
-
inset-block-start:50%;
|
|
27
|
-
inset-inline-start:50%;
|
|
28
|
-
inline-size:max(100%,var(--ol8-component-button-target-comfortable));
|
|
29
|
-
block-size:max(100%,var(--ol8-component-button-target-comfortable));
|
|
30
|
-
transform:translate(-50%,-50%);
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
.ol8-Button[data-ol8-size="compact"]{
|
|
34
|
-
min-block-size:var(--ol8-component-button-height-compact);
|
|
35
|
-
padding-inline:var(--ol8-component-button-padding-inline-compact);
|
|
36
|
-
border-radius:var(--ol8-component-button-radius-compact);
|
|
37
|
-
gap:var(--ol8-component-button-gap-compact);
|
|
38
|
-
font-size:var(--ol8-typography-body-small-font-size);
|
|
39
|
-
line-height:var(--ol8-typography-body-small-line-height);
|
|
40
|
-
letter-spacing:var(--ol8-typography-body-small-letter-spacing);
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
.ol8-Button[data-ol8-size="standard"]{
|
|
44
|
-
gap:var(--ol8-component-button-gap-compact);
|
|
45
|
-
min-block-size:var(--ol8-component-button-height-standard);
|
|
46
|
-
padding-inline:var(--ol8-component-button-padding-inline-standard);
|
|
47
|
-
border-radius:var(--ol8-component-button-radius-standard);
|
|
48
|
-
font-size:var(--ol8-typography-body-medium-font-size);
|
|
49
|
-
line-height:var(--ol8-typography-body-medium-line-height);
|
|
50
|
-
letter-spacing:var(--ol8-typography-body-medium-letter-spacing);
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
.ol8-Button[data-ol8-size="comfortable"]{
|
|
54
|
-
min-block-size:var(--ol8-component-button-height-comfortable);
|
|
55
|
-
padding-inline:var(--ol8-component-button-padding-inline-comfortable);
|
|
56
|
-
border-radius:var(--ol8-component-button-radius-comfortable);
|
|
57
|
-
font-size:var(--ol8-typography-body-medium-font-size);
|
|
58
|
-
line-height:var(--ol8-typography-body-medium-line-height);
|
|
59
|
-
letter-spacing:var(--ol8-typography-body-medium-letter-spacing);
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
.ol8-Button[data-ol8-size="large"]{
|
|
63
|
-
min-block-size:var(--ol8-component-button-height-large);
|
|
64
|
-
min-inline-size:var(--ol8-component-button-target-large);
|
|
65
|
-
padding-inline:var(--ol8-component-button-padding-inline-large);
|
|
66
|
-
border-radius:var(--ol8-component-button-radius-large);
|
|
67
|
-
font-size:var(--ol8-typography-body-large-font-size);
|
|
68
|
-
line-height:var(--ol8-typography-body-large-line-height);
|
|
69
|
-
letter-spacing:var(--ol8-typography-body-large-letter-spacing);
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
.ol8-Button[data-ol8-size="large"]::before{
|
|
73
|
-
inline-size:max(100%,var(--ol8-component-button-target-large));
|
|
74
|
-
block-size:max(100%,var(--ol8-component-button-target-large));
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
.ol8-Button[data-ol8-full-width="true"]{inline-size:100%}
|
|
78
|
-
|
|
79
|
-
.ol8-Button[data-ol8-variant="primary"]{
|
|
80
|
-
border-width:var(--ol8-border-width-none);
|
|
81
|
-
background:var(--ol8-color-action-primary-default);
|
|
82
|
-
color:var(--ol8-color-action-primary-content);
|
|
83
|
-
}
|
|
84
|
-
.ol8-Button[data-ol8-variant="secondary"]{
|
|
85
|
-
border-width:var(--ol8-component-button-secondary-boundary);
|
|
86
|
-
background:var(--ol8-color-action-secondary-surface-default);
|
|
87
|
-
border-color:var(--ol8-color-action-secondary-content-default);
|
|
88
|
-
color:var(--ol8-color-action-secondary-content-default);
|
|
89
|
-
}
|
|
90
|
-
.ol8-Button[data-ol8-variant="quiet"]{
|
|
91
|
-
border-width:var(--ol8-border-width-none);
|
|
92
|
-
background:var(--ol8-color-action-quiet-surface-default);
|
|
93
|
-
color:var(--ol8-color-action-quiet-content-default);
|
|
94
|
-
}
|
|
95
|
-
.ol8-Button[data-ol8-variant="destructive"]{
|
|
96
|
-
border-width:var(--ol8-border-width-none);
|
|
97
|
-
background:var(--ol8-color-action-destructive-default);
|
|
98
|
-
color:var(--ol8-color-action-destructive-content);
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
.ol8-Button[data-ol8-variant="primary"]:hover:not(:disabled):not([aria-busy="true"]){background:var(--ol8-color-action-primary-hover);box-shadow:var(--ol8-elevation-surface-raised)}
|
|
102
|
-
.ol8-Button[data-ol8-variant="secondary"]:hover:not(:disabled):not([aria-busy="true"]){background:var(--ol8-color-action-secondary-surface-hover);border-color:var(--ol8-color-action-secondary-content-hover);color:var(--ol8-color-action-secondary-content-hover);box-shadow:var(--ol8-elevation-surface-raised)}
|
|
103
|
-
.ol8-Button[data-ol8-variant="quiet"]:hover:not(:disabled):not([aria-busy="true"]){background:var(--ol8-color-action-quiet-surface-hover);color:var(--ol8-color-action-quiet-content-hover)}
|
|
104
|
-
.ol8-Button[data-ol8-variant="destructive"]:hover:not(:disabled):not([aria-busy="true"]){background:var(--ol8-color-action-destructive-hover);box-shadow:var(--ol8-elevation-surface-raised)}
|
|
105
|
-
|
|
106
|
-
.ol8-Button[data-ol8-variant="primary"]:active:not(:disabled):not([aria-busy="true"]){background:var(--ol8-color-action-primary-pressed);box-shadow:var(--ol8-elevation-surface-flat)}
|
|
107
|
-
.ol8-Button[data-ol8-variant="secondary"]:active:not(:disabled):not([aria-busy="true"]){background:var(--ol8-color-action-secondary-surface-pressed);border-color:var(--ol8-color-action-secondary-content-pressed);color:var(--ol8-color-action-secondary-content-pressed);box-shadow:var(--ol8-elevation-surface-flat)}
|
|
108
|
-
.ol8-Button[data-ol8-variant="quiet"]:active:not(:disabled):not([aria-busy="true"]){background:var(--ol8-color-action-quiet-surface-pressed);color:var(--ol8-color-action-quiet-content-pressed)}
|
|
109
|
-
.ol8-Button[data-ol8-variant="destructive"]:active:not(:disabled):not([aria-busy="true"]){background:var(--ol8-color-action-destructive-pressed);box-shadow:var(--ol8-elevation-surface-flat)}
|
|
110
|
-
|
|
111
|
-
.ol8-Button:focus-visible{
|
|
112
|
-
outline:none;
|
|
113
|
-
box-shadow:inset 0 0 0 var(--ol8-focus-ring-inner-width) var(--ol8-color-focus-inner),inset 0 0 0 var(--ol8-focus-ring-total-width) var(--ol8-color-focus-outer);
|
|
114
|
-
}
|
|
115
|
-
|
|
116
|
-
.ol8-Button[data-ol8-material="gem"][data-ol8-variant="primary"]{border-width:0;background:linear-gradient(135deg,var(--ol8-material-control-gem-primary-start),var(--ol8-material-control-gem-primary-mid),var(--ol8-material-control-gem-primary-end));color:var(--ol8-material-control-gem-primary-content);box-shadow:inset 0 0 0 var(--ol8-component-choice-optical-stroke) var(--ol8-material-control-gem-rim-default),var(--ol8-elevation-surface-raised);backdrop-filter:blur(var(--ol8-material-control-gem-blur))}
|
|
117
|
-
.ol8-Button[data-ol8-material="gem"][data-ol8-variant="secondary"]{border-width:0;background:linear-gradient(135deg,var(--ol8-material-control-gem-secondary-high),var(--ol8-material-control-gem-secondary-mid),var(--ol8-material-control-gem-secondary-low));color:var(--ol8-material-control-gem-secondary-content);box-shadow:inset 0 0 0 var(--ol8-component-choice-optical-stroke) var(--ol8-material-control-gem-rim-default),var(--ol8-elevation-surface-raised);backdrop-filter:blur(var(--ol8-material-control-gem-blur))}
|
|
118
|
-
.ol8-Button[data-ol8-material="gem"][data-ol8-variant="primary"]:hover:not(:disabled):not([aria-busy="true"]){background:linear-gradient(135deg,var(--ol8-material-control-gem-primary-hover-start),var(--ol8-material-control-gem-primary-hover-mid),var(--ol8-material-control-gem-primary-hover-end))}
|
|
119
|
-
.ol8-Button[data-ol8-material="gem"][data-ol8-variant="secondary"]:hover:not(:disabled):not([aria-busy="true"]){background:linear-gradient(135deg,var(--ol8-material-control-gem-secondary-hover-high),var(--ol8-material-control-gem-secondary-hover-mid),var(--ol8-material-control-gem-secondary-hover-low));color:var(--ol8-material-control-gem-secondary-content)}
|
|
120
|
-
.ol8-Button[data-ol8-material="gem"][data-ol8-variant="primary"][aria-busy="true"]{background:linear-gradient(135deg,var(--ol8-material-control-gem-primary-loading-start),var(--ol8-material-control-gem-primary-loading-mid),var(--ol8-material-control-gem-primary-loading-end));color:var(--ol8-material-control-gem-primary-content)}
|
|
121
|
-
.ol8-Button[data-ol8-material="gem"][data-ol8-variant="secondary"][aria-busy="true"]{background:linear-gradient(135deg,var(--ol8-material-control-gem-secondary-loading-high),var(--ol8-material-control-gem-secondary-loading-mid),var(--ol8-material-control-gem-secondary-loading-low));color:var(--ol8-material-control-gem-secondary-content)}
|
|
122
|
-
|
|
123
|
-
.ol8-Button:disabled,.ol8-Button[aria-busy="true"]{cursor:not-allowed;box-shadow:var(--ol8-elevation-surface-flat)}
|
|
124
|
-
.ol8-Button[aria-busy="true"]{cursor:wait}
|
|
125
|
-
.ol8-Button[data-ol8-variant="primary"]:disabled,.ol8-Button[data-ol8-variant="primary"][aria-busy="true"]{background:var(--ol8-color-action-primary-disabled);color:var(--ol8-color-action-primary-disabled-content)}
|
|
126
|
-
.ol8-Button[data-ol8-variant="secondary"]:disabled,.ol8-Button[data-ol8-variant="secondary"][aria-busy="true"]{background:var(--ol8-color-action-secondary-surface-disabled);border-color:var(--ol8-color-action-secondary-content-disabled);color:var(--ol8-color-action-secondary-content-disabled)}
|
|
127
|
-
.ol8-Button[data-ol8-variant="quiet"]:disabled,.ol8-Button[data-ol8-variant="quiet"][aria-busy="true"]{background:var(--ol8-color-action-quiet-surface-disabled);color:var(--ol8-color-action-quiet-content-disabled)}
|
|
128
|
-
.ol8-Button[data-ol8-variant="destructive"]:disabled,.ol8-Button[data-ol8-variant="destructive"][aria-busy="true"]{background:var(--ol8-color-action-destructive-disabled);color:var(--ol8-color-action-destructive-disabled-content)}
|
|
129
|
-
|
|
130
|
-
/* Canonical Gem masters use the hover recipe for Pressed, including keyboard
|
|
131
|
-
activation without pointer hover. Disabled wins over material and loading. */
|
|
132
|
-
.ol8-Button[data-ol8-material="gem"][data-ol8-variant="primary"]:active:not(:disabled):not([aria-busy="true"]){background:linear-gradient(135deg,var(--ol8-material-control-gem-primary-hover-start),var(--ol8-material-control-gem-primary-hover-mid),var(--ol8-material-control-gem-primary-hover-end))}
|
|
133
|
-
.ol8-Button[data-ol8-material="gem"][data-ol8-variant="secondary"]:active:not(:disabled):not([aria-busy="true"]){background:linear-gradient(135deg,var(--ol8-material-control-gem-secondary-hover-high),var(--ol8-material-control-gem-secondary-hover-mid),var(--ol8-material-control-gem-secondary-hover-low))}
|
|
134
|
-
.ol8-Button[data-ol8-material="gem"][data-ol8-variant="primary"]:disabled{background:var(--ol8-color-action-primary-disabled);color:var(--ol8-color-action-primary-disabled-content);box-shadow:var(--ol8-elevation-surface-flat);backdrop-filter:none}
|
|
135
|
-
.ol8-Button[data-ol8-material="gem"][data-ol8-variant="secondary"]:disabled{background:var(--ol8-color-action-secondary-surface-disabled);color:var(--ol8-color-action-secondary-content-disabled);box-shadow:var(--ol8-elevation-surface-flat);backdrop-filter:none}
|
|
136
|
-
|
|
137
|
-
.ol8-Button__icon{
|
|
138
|
-
display:inline-grid;
|
|
139
|
-
place-items:center;
|
|
140
|
-
flex:none;
|
|
141
|
-
inline-size:var(--ol8-component-button-icon-compact);
|
|
142
|
-
block-size:var(--ol8-component-button-icon-compact);
|
|
143
|
-
transition:transform var(--ol8-motion-interaction-hover-duration) var(--ol8-motion-interaction-hover-timing-function);
|
|
144
|
-
}
|
|
145
|
-
.ol8-Button[data-ol8-size="comfortable"] .ol8-Button__icon,.ol8-Button[data-ol8-size="large"] .ol8-Button__icon{inline-size:var(--ol8-component-button-icon-comfortable);block-size:var(--ol8-component-button-icon-comfortable)}
|
|
146
|
-
.ol8-Button__icon>svg{inline-size:100%;block-size:100%}
|
|
147
|
-
.ol8-Button[data-ol8-icon-motion="rotate"]:hover:not(:disabled):not([aria-busy="true"]) .ol8-Button__icon{transform:rotate(-30deg)}
|
|
148
|
-
.ol8-Button[data-ol8-icon-motion="forward"]:hover:not(:disabled):not([aria-busy="true"]) .ol8-Button__icon{transform:translateX(var(--ol8-motion-distance-minimal))}
|
|
149
|
-
.ol8-Button[data-ol8-icon-motion="backward"]:hover:not(:disabled):not([aria-busy="true"]) .ol8-Button__icon{transform:translateX(calc(var(--ol8-motion-distance-minimal) * -1))}
|
|
150
|
-
.ol8-Button:dir(rtl)[data-ol8-icon-motion="forward"]:hover:not(:disabled):not([aria-busy="true"]) .ol8-Button__icon{transform:translateX(calc(var(--ol8-motion-distance-minimal) * -1))}
|
|
151
|
-
.ol8-Button:dir(rtl)[data-ol8-icon-motion="backward"]:hover:not(:disabled):not([aria-busy="true"]) .ol8-Button__icon{transform:translateX(var(--ol8-motion-distance-minimal))}
|
|
152
|
-
|
|
153
|
-
.ol8-Button__status{
|
|
154
|
-
flex:none;
|
|
155
|
-
inline-size:var(--ol8-component-button-icon-compact);
|
|
156
|
-
block-size:var(--ol8-component-button-icon-compact);
|
|
157
|
-
animation:ol8-Button-spin var(--ol8-motion-duration-deliberate) var(--ol8-motion-easing-linear) infinite;
|
|
158
|
-
}
|
|
159
|
-
|
|
160
|
-
@keyframes ol8-Button-spin{to{transform:rotate(1turn)}}
|
|
161
|
-
.ol8-Button[data-ol8-size="comfortable"] .ol8-Button__status,.ol8-Button[data-ol8-size="large"] .ol8-Button__status{inline-size:var(--ol8-component-button-icon-comfortable);block-size:var(--ol8-component-button-icon-comfortable)}
|
|
162
|
-
|
|
163
|
-
@media (prefers-reduced-motion:reduce){
|
|
164
|
-
.ol8-Button,.ol8-Button__icon{transition-duration:var(--ol8-motion-duration-instant)}
|
|
165
|
-
.ol8-Button__status{animation:none}
|
|
166
|
-
}
|
|
167
|
-
|
|
168
|
-
@media (prefers-reduced-transparency:reduce){
|
|
169
|
-
.ol8-Button[data-ol8-material="gem"][data-ol8-variant="primary"]{background:var(--ol8-color-action-primary-default);backdrop-filter:none}
|
|
170
|
-
.ol8-Button[data-ol8-material="gem"][data-ol8-variant="secondary"]{background:var(--ol8-color-surface-raised);border:var(--ol8-component-button-secondary-boundary) solid var(--ol8-color-action-secondary-content-default);color:var(--ol8-color-action-secondary-content-default);backdrop-filter:none}
|
|
171
|
-
}
|
|
172
|
-
|
|
173
|
-
@media (forced-colors:active){
|
|
174
|
-
.ol8-Button{forced-color-adjust:auto}
|
|
175
|
-
.ol8-Button:focus-visible{outline:var(--ol8-focus-ring-inner-width) solid Highlight;outline-offset:var(--ol8-focus-ring-offset);box-shadow:none}
|
|
176
|
-
}
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
/* Shared private material treatment for ButtonControl consumers.
|
|
2
|
-
Figma angular stroke: 3px INSIDE, stops 0/18/39/60/81/100%.
|
|
3
|
-
The mask removes the centre without adding an opaque inner surface. */
|
|
4
|
-
.ol8-IconButton__surface{position:relative}
|
|
5
|
-
.ol8-Button[data-ol8-material="gem"]:focus-visible,
|
|
6
|
-
.ol8-IconButton[data-ol8-material="gem"]:focus-visible .ol8-IconButton__surface{
|
|
7
|
-
box-shadow:var(--ol8-elevation-surface-raised);
|
|
8
|
-
}
|
|
9
|
-
.ol8-Button[data-ol8-material="gem"]:focus-visible::after,
|
|
10
|
-
.ol8-IconButton[data-ol8-material="gem"]:focus-visible .ol8-IconButton__surface::after{
|
|
11
|
-
content:"";
|
|
12
|
-
position:absolute;
|
|
13
|
-
inset:0;
|
|
14
|
-
box-sizing:border-box;
|
|
15
|
-
padding:var(--ol8-focus-ring-inner-width);
|
|
16
|
-
border-radius:inherit;
|
|
17
|
-
pointer-events:none;
|
|
18
|
-
background:conic-gradient(from 90deg,var(--ol8-color-focus-outer) 0%,var(--ol8-color-focus-inner) 18%,var(--ol8-color-focus-outer) 39%,var(--ol8-color-focus-inner) 60%,var(--ol8-color-focus-outer) 81%,var(--ol8-color-focus-outer) 100%);
|
|
19
|
-
-webkit-mask:linear-gradient(currentColor,currentColor) content-box,linear-gradient(currentColor,currentColor);
|
|
20
|
-
mask:linear-gradient(currentColor,currentColor) content-box,linear-gradient(currentColor,currentColor);
|
|
21
|
-
-webkit-mask-composite:xor;
|
|
22
|
-
mask-composite:exclude;
|
|
23
|
-
}
|
|
24
|
-
@media (forced-colors:active){
|
|
25
|
-
.ol8-Button[data-ol8-material="gem"]:focus-visible,
|
|
26
|
-
.ol8-IconButton[data-ol8-material="gem"]:focus-visible .ol8-IconButton__surface{
|
|
27
|
-
outline:var(--ol8-focus-ring-inner-width) solid Highlight;
|
|
28
|
-
outline-offset:calc(var(--ol8-focus-ring-inner-width) * -1);
|
|
29
|
-
box-shadow:none;
|
|
30
|
-
}
|
|
31
|
-
.ol8-Button[data-ol8-material="gem"]:focus-visible::after,
|
|
32
|
-
.ol8-IconButton[data-ol8-material="gem"]:focus-visible .ol8-IconButton__surface::after{display:none}
|
|
33
|
-
}
|
package/styles/icon-button.css
DELETED
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
.ol8-IconButton{display:inline-grid;place-items:center;inline-size:var(--ol8-component-icon-button-target-comfortable);block-size:var(--ol8-component-icon-button-target-comfortable);padding:0;border:0;background:transparent;color:var(--ol8-color-action-quiet-content-default);cursor:pointer}
|
|
2
|
-
.ol8-IconButton[data-ol8-size="large"]{inline-size:var(--ol8-component-icon-button-target-large);block-size:var(--ol8-component-icon-button-target-large)}
|
|
3
|
-
.ol8-IconButton__surface{display:grid;place-items:center;box-sizing:border-box;inline-size:var(--ol8-component-icon-button-box-comfortable);block-size:var(--ol8-component-icon-button-box-comfortable);border-style:solid;border-color:transparent;border-radius:var(--ol8-component-icon-button-radius-comfortable);background:transparent;box-shadow:var(--ol8-elevation-surface-flat);transition-property:background-color,border-color,color,box-shadow;transition-duration:var(--ol8-motion-interaction-hover-duration);transition-timing-function:var(--ol8-motion-interaction-hover-timing-function)}
|
|
4
|
-
.ol8-IconButton[data-ol8-size="compact"] .ol8-IconButton__surface{inline-size:var(--ol8-component-icon-button-box-compact);block-size:var(--ol8-component-icon-button-box-compact);border-radius:var(--ol8-component-icon-button-radius-compact)}
|
|
5
|
-
.ol8-IconButton[data-ol8-size="standard"] .ol8-IconButton__surface{inline-size:var(--ol8-component-icon-button-box-standard);block-size:var(--ol8-component-icon-button-box-standard);border-radius:var(--ol8-component-icon-button-radius-standard)}
|
|
6
|
-
.ol8-IconButton[data-ol8-size="large"] .ol8-IconButton__surface{inline-size:var(--ol8-component-icon-button-box-large);block-size:var(--ol8-component-icon-button-box-large);border-radius:var(--ol8-component-icon-button-radius-large)}
|
|
7
|
-
.ol8-IconButton[data-ol8-shape="circle"] .ol8-IconButton__surface{border-radius:var(--ol8-component-icon-button-radius-circle)}
|
|
8
|
-
.ol8-IconButton__icon{display:grid;place-items:center;inline-size:var(--ol8-component-icon-button-artwork-comfortable);block-size:var(--ol8-component-icon-button-artwork-comfortable)}
|
|
9
|
-
.ol8-IconButton[data-ol8-size="compact"] .ol8-IconButton__icon{inline-size:var(--ol8-component-icon-button-artwork-compact);block-size:var(--ol8-component-icon-button-artwork-compact)}
|
|
10
|
-
.ol8-IconButton[data-ol8-size="standard"] .ol8-IconButton__icon{inline-size:var(--ol8-component-icon-button-artwork-standard);block-size:var(--ol8-component-icon-button-artwork-standard)}
|
|
11
|
-
.ol8-IconButton[data-ol8-size="large"] .ol8-IconButton__icon{inline-size:var(--ol8-component-icon-button-artwork-large);block-size:var(--ol8-component-icon-button-artwork-large)}
|
|
12
|
-
.ol8-IconButton__icon>svg,.ol8-IconButton__icon>img{inline-size:100%;block-size:100%}
|
|
13
|
-
.ol8-IconButton[data-ol8-variant="primary"] .ol8-IconButton__surface{border-width:0;background:var(--ol8-color-action-primary-default);color:var(--ol8-color-action-primary-content)}
|
|
14
|
-
.ol8-IconButton[data-ol8-variant="secondary"] .ol8-IconButton__surface{border-width:var(--ol8-component-button-secondary-boundary);background:var(--ol8-color-action-secondary-surface-default);border-color:var(--ol8-color-action-secondary-content-default);color:var(--ol8-color-action-secondary-content-default)}
|
|
15
|
-
.ol8-IconButton[data-ol8-variant="quiet"] .ol8-IconButton__surface{border-width:0;background:var(--ol8-color-action-quiet-surface-default);color:var(--ol8-color-action-quiet-content-default)}
|
|
16
|
-
.ol8-IconButton[data-ol8-variant="destructive"] .ol8-IconButton__surface{border-width:0;background:var(--ol8-color-action-destructive-default);color:var(--ol8-color-action-destructive-content)}
|
|
17
|
-
.ol8-IconButton[data-ol8-variant="primary"]:hover:not(:disabled):not([aria-busy="true"]) .ol8-IconButton__surface{background:var(--ol8-color-action-primary-hover);box-shadow:var(--ol8-elevation-surface-raised)}
|
|
18
|
-
.ol8-IconButton[data-ol8-variant="secondary"]:hover:not(:disabled):not([aria-busy="true"]) .ol8-IconButton__surface{background:var(--ol8-color-icon-button-secondary-hover-surface);border-color:var(--ol8-color-action-secondary-content-hover);color:var(--ol8-color-action-secondary-content-hover);box-shadow:var(--ol8-elevation-surface-raised)}
|
|
19
|
-
.ol8-IconButton[data-ol8-variant="quiet"]:hover:not(:disabled):not([aria-busy="true"]) .ol8-IconButton__surface{background:var(--ol8-color-icon-button-quiet-hover-surface);color:var(--ol8-color-action-quiet-content-hover);box-shadow:var(--ol8-elevation-surface-raised)}
|
|
20
|
-
.ol8-IconButton[data-ol8-variant="destructive"]:hover:not(:disabled):not([aria-busy="true"]) .ol8-IconButton__surface{background:var(--ol8-color-action-destructive-hover);box-shadow:var(--ol8-elevation-surface-raised)}
|
|
21
|
-
.ol8-IconButton[data-ol8-variant="primary"]:active:not(:disabled):not([aria-busy="true"]) .ol8-IconButton__surface{background:var(--ol8-color-action-primary-pressed);box-shadow:var(--ol8-elevation-surface-flat)}
|
|
22
|
-
.ol8-IconButton[data-ol8-variant="secondary"]:active:not(:disabled):not([aria-busy="true"]) .ol8-IconButton__surface{background:var(--ol8-color-action-secondary-surface-pressed);border-color:var(--ol8-color-action-secondary-content-pressed);color:var(--ol8-color-action-secondary-content-pressed);box-shadow:var(--ol8-elevation-surface-flat)}
|
|
23
|
-
.ol8-IconButton[data-ol8-variant="quiet"]:active:not(:disabled):not([aria-busy="true"]) .ol8-IconButton__surface{background:var(--ol8-color-action-quiet-surface-pressed);color:var(--ol8-color-action-quiet-content-pressed)}
|
|
24
|
-
.ol8-IconButton[data-ol8-variant="destructive"]:active:not(:disabled):not([aria-busy="true"]) .ol8-IconButton__surface{background:var(--ol8-color-action-destructive-pressed);box-shadow:var(--ol8-elevation-surface-flat)}
|
|
25
|
-
.ol8-IconButton:focus-visible{outline:0}.ol8-IconButton:focus-visible .ol8-IconButton__surface{box-shadow:inset 0 0 0 var(--ol8-focus-ring-inner-width) var(--ol8-color-focus-inner),inset 0 0 0 var(--ol8-focus-ring-total-width) var(--ol8-color-focus-outer)}
|
|
26
|
-
.ol8-IconButton[aria-pressed="true"] .ol8-IconButton__surface{box-shadow:inset 0 0 0 var(--ol8-component-choice-optical-stroke) currentColor;background:var(--ol8-color-selection-surface);color:var(--ol8-color-selection-content)}
|
|
27
|
-
.ol8-IconButton:disabled,.ol8-IconButton[aria-busy="true"]{cursor:not-allowed}
|
|
28
|
-
.ol8-IconButton[data-ol8-variant="primary"]:disabled .ol8-IconButton__surface,.ol8-IconButton[data-ol8-variant="primary"][aria-busy="true"] .ol8-IconButton__surface{background:var(--ol8-color-action-primary-disabled);color:var(--ol8-color-action-primary-disabled-content)}
|
|
29
|
-
.ol8-IconButton[data-ol8-variant="secondary"]:disabled .ol8-IconButton__surface,.ol8-IconButton[data-ol8-variant="secondary"][aria-busy="true"] .ol8-IconButton__surface{background:var(--ol8-color-action-secondary-surface-disabled);border-color:var(--ol8-color-action-secondary-content-disabled);color:var(--ol8-color-action-secondary-content-disabled)}
|
|
30
|
-
.ol8-IconButton[data-ol8-variant="quiet"]:disabled .ol8-IconButton__surface,.ol8-IconButton[data-ol8-variant="quiet"][aria-busy="true"] .ol8-IconButton__surface{background:var(--ol8-color-action-quiet-surface-disabled);color:var(--ol8-color-action-quiet-content-disabled)}
|
|
31
|
-
.ol8-IconButton[data-ol8-variant="destructive"]:disabled .ol8-IconButton__surface,.ol8-IconButton[data-ol8-variant="destructive"][aria-busy="true"] .ol8-IconButton__surface{background:var(--ol8-color-action-destructive-disabled);color:var(--ol8-color-action-destructive-disabled-content)}
|
|
32
|
-
.ol8-IconButton[data-ol8-material="gem"][data-ol8-variant="primary"] .ol8-IconButton__surface{background:linear-gradient(135deg,var(--ol8-material-control-gem-primary-start),var(--ol8-material-control-gem-primary-mid),var(--ol8-material-control-gem-primary-end));color:var(--ol8-color-icon-on-gem);box-shadow:inset 0 0 0 var(--ol8-component-choice-optical-stroke) var(--ol8-material-control-gem-rim-default),var(--ol8-elevation-surface-raised);backdrop-filter:blur(var(--ol8-material-control-gem-blur))}
|
|
33
|
-
.ol8-IconButton[data-ol8-material="gem"][data-ol8-variant="secondary"] .ol8-IconButton__surface{border-width:0;background:linear-gradient(135deg,var(--ol8-material-control-gem-secondary-high),var(--ol8-material-control-gem-secondary-mid),var(--ol8-material-control-gem-secondary-low));color:var(--ol8-color-icon-on-gem);box-shadow:inset 0 0 0 var(--ol8-component-choice-optical-stroke) var(--ol8-material-control-gem-rim-default),var(--ol8-elevation-surface-raised);backdrop-filter:blur(var(--ol8-material-control-gem-blur))}
|
|
34
|
-
.ol8-IconButton[data-ol8-material="gem"][data-ol8-variant="primary"][aria-busy="true"] .ol8-IconButton__surface{background:linear-gradient(135deg,var(--ol8-material-control-gem-primary-loading-start),var(--ol8-material-control-gem-primary-loading-mid),var(--ol8-material-control-gem-primary-loading-end))}
|
|
35
|
-
.ol8-IconButton[data-ol8-material="gem"][data-ol8-variant="secondary"][aria-busy="true"] .ol8-IconButton__surface{background:linear-gradient(135deg,var(--ol8-material-control-gem-secondary-loading-high),var(--ol8-material-control-gem-secondary-loading-mid),var(--ol8-material-control-gem-secondary-loading-low));color:var(--ol8-color-icon-on-gem)}
|
|
36
|
-
.ol8-IconButton__status{inline-size:var(--ol8-component-icon-button-artwork-compact);block-size:var(--ol8-component-icon-button-artwork-compact);animation:ol8-IconButton-spin var(--ol8-motion-duration-deliberate) var(--ol8-motion-easing-linear) infinite}
|
|
37
|
-
@keyframes ol8-IconButton-spin{to{transform:rotate(1turn)}}
|
|
38
|
-
.ol8-IconButton[data-ol8-size="comfortable"] .ol8-IconButton__status,.ol8-IconButton[data-ol8-size="large"] .ol8-IconButton__status{inline-size:var(--ol8-component-icon-button-artwork-comfortable);block-size:var(--ol8-component-icon-button-artwork-comfortable)}
|
|
39
|
-
@media (prefers-reduced-motion:reduce){.ol8-IconButton__surface{transition-duration:var(--ol8-motion-duration-instant)}.ol8-IconButton__status{animation:none}}
|
|
40
|
-
.ol8-IconButton[data-ol8-motion="none"] .ol8-IconButton__surface{transition-duration:var(--ol8-motion-duration-instant)}
|
|
41
|
-
@media (prefers-reduced-transparency:reduce){.ol8-IconButton[data-ol8-material="gem"][data-ol8-variant="primary"] .ol8-IconButton__surface{background:var(--ol8-color-action-primary-default);backdrop-filter:none}.ol8-IconButton[data-ol8-material="gem"][data-ol8-variant="secondary"] .ol8-IconButton__surface{background:var(--ol8-color-surface-raised);border:var(--ol8-component-button-secondary-boundary) solid var(--ol8-color-action-secondary-content-default);color:var(--ol8-color-action-secondary-content-default);backdrop-filter:none}}
|
|
42
|
-
@media (forced-colors:active){.ol8-IconButton{forced-color-adjust:auto}.ol8-IconButton:focus-visible .ol8-IconButton__surface{outline:var(--ol8-focus-ring-inner-width) solid Highlight;outline-offset:calc(var(--ol8-focus-ring-inner-width)*-1);box-shadow:none}}
|
package/styles/icon-frame.css
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
.ol8-IconFrame>svg{stroke-width:var(--ol8-component-icon-stroke)}
|
package/styles/link.css
DELETED
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
.ol8-Link{position:relative;color:var(--ol8-color-text-link-default);font-family:var(--ol8-font-family-functional);font-weight:var(--ol8-font-weight-semibold);text-decoration-line:underline;text-decoration-thickness:var(--ol8-component-link-underline-default);text-underline-offset:var(--ol8-component-link-underline-offset);transition-property:color,text-decoration-thickness,background-color,box-shadow;transition-duration:var(--ol8-motion-interaction-hover-duration);transition-timing-function:var(--ol8-motion-interaction-hover-timing-function)}
|
|
2
|
-
.ol8-Link[data-ol8-size="small"]{font-size:var(--ol8-typography-body-small-font-size);line-height:var(--ol8-typography-body-small-line-height);letter-spacing:var(--ol8-typography-body-small-letter-spacing)}
|
|
3
|
-
.ol8-Link[data-ol8-size="standard"]{font-size:var(--ol8-typography-body-medium-font-size);line-height:var(--ol8-typography-body-medium-line-height);letter-spacing:var(--ol8-typography-body-medium-letter-spacing)}
|
|
4
|
-
.ol8-Link[data-ol8-size="large"]{font-size:var(--ol8-typography-body-large-font-size);line-height:var(--ol8-typography-body-large-line-height);letter-spacing:var(--ol8-typography-body-large-letter-spacing)}
|
|
5
|
-
.ol8-Link[data-ol8-size="inherit"]{font-size:inherit;line-height:inherit;letter-spacing:inherit}
|
|
6
|
-
.ol8-Link:hover{color:var(--ol8-color-text-link-hover);text-decoration-thickness:var(--ol8-component-link-underline-emphasis)}
|
|
7
|
-
.ol8-Link:active{color:var(--ol8-color-text-link-pressed);text-decoration-thickness:var(--ol8-component-link-underline-emphasis)}
|
|
8
|
-
.ol8-Link[data-ol8-form="inline"]:visited,.ol8-Link[data-ol8-form="standalone"]:visited{color:var(--ol8-color-text-link-visited)}
|
|
9
|
-
.ol8-Link:focus-visible{outline:0;color:var(--ol8-color-text-primary);box-shadow:inset 0 0 0 var(--ol8-focus-ring-inner-width) var(--ol8-color-focus-inner),inset 0 0 0 var(--ol8-focus-ring-total-width) var(--ol8-color-focus-outer);border-radius:var(--ol8-shape-radius-subtle)}
|
|
10
|
-
.ol8-Link[data-ol8-form="standalone"],.ol8-Link[data-ol8-form="navigation"]{display:inline-flex;align-items:center;min-block-size:var(--ol8-component-link-target-navigation)}
|
|
11
|
-
.ol8-Link[data-ol8-form="navigation"]{inline-size:100%;padding-inline:var(--ol8-spacing-inline-standard);text-decoration-color:transparent}
|
|
12
|
-
.ol8-Link[data-ol8-form="navigation"]:hover,.ol8-Link[data-ol8-form="navigation"]:focus-visible{text-decoration-color:currentColor}
|
|
13
|
-
.ol8-Link[data-ol8-form="navigation"][aria-current]{color:var(--ol8-color-action-primary-default);text-decoration-color:currentColor;font-weight:var(--ol8-font-weight-semibold)}
|
|
14
|
-
.ol8-Link[data-ol8-form="navigation"][aria-current]::before{content:"";position:absolute;inset-inline-start:0;inset-block:var(--ol8-spacing-stack-tight);inline-size:var(--ol8-focus-ring-inner-width);border-radius:var(--ol8-shape-radius-full);background:currentColor}
|
|
15
|
-
.ol8-NavigationList__list{display:grid;gap:var(--ol8-spacing-stack-tight);margin:0;padding:0;list-style:none}
|
|
16
|
-
.ol8-NavigationList__list .ol8-NavigationList__list{margin-inline-start:var(--ol8-spacing-stack-grouped)}
|
|
17
|
-
.ol8-NavigationList__item[data-ol8-active-ancestor="true"]>.ol8-Link{color:var(--ol8-color-text-primary);font-weight:var(--ol8-font-weight-semibold);background:var(--ol8-color-action-quiet-surface-hover)}
|
|
18
|
-
.ol8-Link[data-ol8-motion="none"]{transition-duration:var(--ol8-motion-duration-instant)}
|
|
19
|
-
@media (prefers-reduced-motion:reduce){.ol8-Link{transition-duration:var(--ol8-motion-duration-instant)}}
|
|
20
|
-
@media (forced-colors:active){.ol8-Link{forced-color-adjust:auto}.ol8-Link:focus-visible{outline:var(--ol8-focus-ring-inner-width) solid Highlight;outline-offset:calc(var(--ol8-focus-ring-inner-width)*-1);box-shadow:none}.ol8-Link[data-ol8-form="navigation"][aria-current]::before{background:Highlight}}
|