Skip to content

Commit c118677

Browse files
9am9am
committed
add theme Neumorphism
1 parent 570547d commit c118677

7 files changed

Lines changed: 106 additions & 20 deletions

File tree

‎.changeset/gold-birds-matter.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@9am/ctrl-panel': minor
3+
---
4+
5+
Refactor meter

‎index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<title>ctrl-panel</title>
66
</head>
77
<body>
8-
<ctrl-panel theme="test">
8+
<ctrl-panel theme="neumorphism">
99
<span slot="label">CTRL panel</span>
1010
<ctrl-vector name="vector" orientation="v" default="[1,1]">vector</ctrl-vector>
1111
<ctrl-text name="text">text</ctrl-text>
@@ -23,7 +23,7 @@
2323
<ctrl-slider type="knob" name="vertical" orientation="v">vertical</ctrl-slider>
2424
<ctrl-slider type="knob" name="step" min="10" max="30" step="2" default="12">step</ctrl-slider>
2525
</ctrl-group>
26-
<ctrl-group name="clamb">
26+
<ctrl-group name="clamp">
2727
<span slot="label">clamp:</span>
2828
<ctrl-clamp type="range" name="common" default="[3,6]">common</ctrl-clamp>
2929
<ctrl-clamp type="range" name="vertical" orientation="v">vertical</ctrl-clamp>

‎lib/ctrl-base/style.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
/* ctrl */
1313
--gap: 8px;
1414
--color-bg: rgba(0,0,0,0.05);
15-
--color-label: dimgrey;
15+
--color-label: #444;
1616
--color-detail: dimgrey;
1717
display: flex;
1818
justify-content: center;

‎lib/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
export * from './theme/oldschool.css';
2+
export * from './theme/neumorphism.css';
23

34
// ctrl
45
export { CtrlClamp } from './ctrl-clamp';

‎lib/input-knob/style.css‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,15 +41,17 @@
4141
transition: var(--trans);
4242
transform: scale(0.8) rotate(calc(var(--rotate-start) + var(--percent) * var(--track-percent) * 1turn));
4343
background: var(--color-5);
44+
outline-offset: -1px;
45+
outline: 1px dotted var(--color-2);
4446
border-radius: 50%;
4547
&::after {
4648
/* thumb bar */
4749
content: '';
4850
position: absolute;
49-
top: 48%;
51+
top: 46%;
5052
left: 50%;
5153
width: var(--thumb-size);
52-
height: 53%;
54+
height: 56%;
5355
border-top-left-radius: var(--thumb-size);
5456
border-top-right-radius: var(--thumb-size);
5557
background: var(--color-1);

‎lib/theme/neumorphism.css‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
[theme=neumorphism] {
2+
--dark: rgba(50,50,50,0.2);
3+
--light: rgba(255,255,255,0.95);
4+
--shadow-l-up: 12px 12px 24px 0 var(--dark), -12px -12px 24px 0 var(--light);
5+
--shadow-l-down: inset 12px 12px 24px 0 var(--dark), inset -12px -12px 24px 0 var(--light);
6+
--shadow-m-up: 6px 6px 12px 0 var(--dark), -6px -6px 12px 0 var(--light);
7+
--shadow-m-down: inset 6px 6px 12px 0 var(--dark), inset -6px -6px 12px 0 var(--light);
8+
--shadow-s-up: 2px 2px 4px 0 var(--dark), -2px -2px 4px 0 var(--light);
9+
--shadow-s-down: inset 2px 2px 4px 0 var(--dark), inset -2px -2px 4px 0 var(--light);
10+
--border: 1px solid rgba(255,255,255,0.2);
11+
&ctrl-panel,
12+
& ctrl-group,
13+
& ctrl-radio,
14+
& ctrl-clamp,
15+
& ctrl-color,
16+
& ctrl-slider,
17+
& ctrl-switch,
18+
& ctrl-text,
19+
& ctrl-vector
20+
{
21+
--i-hue: 200deg;
22+
--i-saturation: 0%;
23+
--i-lightness: 160%;
24+
25+
--i-gap: 16px;
26+
--gap: 16px;
27+
--color-label: dimgrey;
28+
--color-detail: darkgrey;
29+
30+
border-radius: 2px;
31+
32+
&::part(label) {
33+
background: unset;
34+
}
35+
&::part(input) {
36+
--color-2: lightgrey;
37+
border: var(--border);
38+
box-shadow: var(--shadow-m-up);
39+
}
40+
&::part(detail) {
41+
background: unset;
42+
}
43+
&::part(group) {
44+
border-radius: 6px;
45+
border: var(--border);
46+
box-shadow: var(--shadow-l-up);
47+
& > .label {
48+
color: red;
49+
}
50+
}
51+
&::part(meter) {
52+
--color-1: rgba(255,255,255,0.5);
53+
--color-2: lightgrey;
54+
--color-3: lightgrey;
55+
}
56+
&::part(g-label) {
57+
transform: translateY(80%);
58+
}
59+
&::part(i-track) {
60+
}
61+
&::part(i-thumb) {
62+
&::after {
63+
border: var(--border);
64+
box-shadow: var(--shadow-m-up);
65+
}
66+
}
67+
}
68+
69+
& ctrl-switch {
70+
&::part(input) {
71+
overflow: visible;
72+
border: unset;
73+
box-shadow: unset;
74+
}
75+
&::part(i-button) {
76+
border: var(--border);
77+
box-shadow: var(--shadow-m-up);
78+
&:active {
79+
}
80+
}
81+
&::part(i-button-checked) {
82+
box-shadow: var(--shadow-s-down);
83+
}
84+
}
85+
}

‎lib/theme/oldschool.css‎

Lines changed: 8 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -33,28 +33,21 @@
3333
border: 1px solid white;
3434
border-style: ridge;
3535
}
36-
&[type=knob] {
37-
&::part(input) {
38-
border-style: inset;
39-
}
40-
&::part(i-thumb) {
41-
border: 1px solid darkgrey;
42-
}
43-
}
4436
}
4537
& ctrl-vector {
46-
&::part(i-crosshair) {
47-
stroke: white;
48-
}
4938
&::part(i-thumb)::after {
5039
border: 1px solid darkgrey;
5140
}
5241
}
53-
& ctrl-clamp {
54-
&::part(inputs) {
55-
}
56-
}
5742
& ctrl-switch {
43+
&[type=range] {
44+
&::part(input) {
45+
border: 1px inset white;
46+
}
47+
&::part(i-thumb)::after {
48+
border: 1px ridge white;
49+
}
50+
}
5851
&::part(input) {
5952
border: none;
6053
}

0 commit comments

Comments
 (0)