Skip to content

Commit 167d50e

Browse files
ggetzggetz
authored
Merge pull request #12802 from CesiumGS/stratakit-css
Stratakit css cleanup
2 parents 7b72cb9 + 21c4cc7 commit 167d50e

File tree

24 files changed

+1348
-242
lines changed

24 files changed

+1348
-242
lines changed

‎packages/sandcastle/gallery/viewerless/index.html

Lines changed: 33 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,38 @@
11
<style>
22
@import url(../templates/bucket.css);
3+
h2 {
4+
font-weight: bold;
5+
font-size: 1.5em;
6+
}
37
</style>
48
<div id="cesiumContainer" class="fullSize"></div>
59
<div id="loadingOverlay"><h1>Loading...</h1></div>
6-
<div id="toolbar"></div>
10+
<div id="toolbar">
11+
<h2>Semantic elements</h2>
12+
<div>Button: <button>New Button</button></div>
13+
<div class="checkbox">
14+
Checkbox: <input type="checkbox" name="check" id="check" /><label
15+
for="check"
16+
>label</label
17+
>
18+
</div>
19+
<div class="radio">
20+
Radio: <input type="radio" name="test" id="rad1" /><label for="rad1"
21+
>label</label
22+
><input type="radio" name="test" id="rad2" /><label for="rad2"
23+
>label2</label
24+
>
25+
</div>
26+
<div>Range: <input type="range" /></div>
27+
<div>
28+
Select:
29+
<select name="fruit" id="fruit">
30+
<option value="apple">Apple</option>
31+
<option value="orange">Orange</option>
32+
<option value="banana">Banana</option>
33+
</select>
34+
</div>
35+
<div>Input: <input type="text" /></div>
36+
<div>Number: <input type="number" /></div>
37+
<h2>Genearated elements</h2>
38+
</div>

‎packages/sandcastle/gallery/viewerless/main.js

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,28 @@
11
//import * as Cesium from "cesium";
2+
import Sandcastle from "Sandcastle";
23

34
//const viewer = new Cesium.Viewer("cesiumContainer");
45

56
console.log("Sandcastle loaded");
67
document.body.style.background = `
78
no-repeat center/30% url(../images/cesium-logomark.svg),
89
linear-gradient(to bottom, lightskyblue, lightgreen)`;
10+
11+
Sandcastle.addToolbarButton("New Button", function () {
12+
// your code here
13+
});
14+
15+
let toggleValue1 = true;
16+
Sandcastle.addToggleButton("Toggle", toggleValue1, function (checked) {
17+
toggleValue1 = checked;
18+
});
19+
20+
const options1 = [
21+
{
22+
text: "Option 1",
23+
onselect: function () {
24+
// your code here, the first option is always run at load
25+
},
26+
},
27+
];
28+
Sandcastle.addToolbarMenu(options1);

‎packages/sandcastle/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
src: url("/fonts/InterVariable-Italic.woff2") format("woff2");
2424
}
2525
</style>
26+
<link rel="stylesheet" href="/styles/stratakit-ext-tokens.css" />
2627
</head>
2728
<body>
2829
<div id="app-container"></div>

‎packages/sandcastle/package.json

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,10 @@
1616
},
1717
"dependencies": {
1818
"@monaco-editor/react": "^4.7.0",
19-
"@stratakit/bricks": "^0.3.1",
20-
"@stratakit/foundations": "^0.2.0",
21-
"@stratakit/icons": "^0.1.2",
22-
"@stratakit/structures": "^0.2.3",
19+
"@stratakit/bricks": "^0.3.4",
20+
"@stratakit/foundations": "^0.2.4",
21+
"@stratakit/icons": "^0.1.3",
22+
"@stratakit/structures": "^0.3.2",
2323
"allotment": "^1.20.4",
2424
"classnames": "^2.5.1",
2525
"monaco-editor": "^0.52.2",

‎packages/sandcastle/public/styles/stratakit-ext-tokens.css

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
/*
2+
* This file is just to define some extra stratakit tokens not in the library yet.
3+
* Names are meant to match the expected values later but with the extra prefix
4+
* --stratakit-ext for "stratakit extensions"
5+
*/
6+
7+
body {
8+
/* Radius values */
9+
/* For sharp corners and precise edges */
10+
--stratakit-ext-radius-none: 0px;
11+
/* For subtle softening */
12+
--stratakit-ext-radius-xs: 2px;
13+
--stratakit-ext-radius-sm: 4px;
14+
/* For standard component styling */
15+
--stratakit-ext-radius-md: 8px;
16+
--stratakit-ext-radius-lg: 12px;
17+
/* For prominent or featured elements */
18+
--stratakit-ext-radius-xl: 16px;
19+
--stratakit-ext-radius-xxl: 24px;
20+
/* For fully circular or pill shaped */
21+
--stratakit-ext-radius-full: 9999px;
22+
23+
/* Border thicknesses */
24+
--stratakit-ext-border-highlight: 0.5px;
25+
--stratakit-ext-border-border: 1px;
26+
--stratakit-ext-border-focus-ring: 2px;
27+
--stratakit-ext-border-emphasis: 4px;
28+
}

‎packages/sandcastle/public/styles/stratakit-mimic/adjustments.css

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
/*
2+
* A few extra adjustments to the stratakit mimic components to make them display
3+
* nicely when used for sandcastle examples with minimal extra layout styling
4+
*/
5+
6+
.stratakit-mimic-button {
7+
margin: var(--stratakit-space-x1);
8+
}
9+
10+
.stratakit-mimic-field {
11+
margin: var(--stratakit-space-x1);
12+
}
13+
.stratakit-mimic-field:has(.stratakit-mimic-switch) {
14+
/* We disable pointer-events on these for an easier click handler, re-enable cursor */
15+
cursor: pointer;
16+
}
17+
18+
.stratakit-mimic-switch {
19+
/* These styles are susceptible to weird sizing if padding is set like some sandcastle already do */
20+
padding: 0 !important;
21+
}
22+
23+
/*
24+
* Undo the reset for select elements to allow using less classes/styles in sandcastles
25+
* revert-layer only undoes this layer not all styles allowing
26+
* other custom styles to still affect these
27+
*/
28+
@layer reset {
29+
table,
30+
thead,
31+
tbody,
32+
tr,
33+
td,
34+
th {
35+
all: revert-layer;
36+
}
37+
38+
input[type="range"] {
39+
margin: revert-layer;
40+
}
41+
input[type="checkbox"] {
42+
margin: revert-layer;
43+
}
44+
input[type="radio"] {
45+
margin: revert-layer;
46+
}
47+
}
48+
49+
/*
50+
* Semantic element "bridge" to bring closer to stratakit elements
51+
* The values for these styles were extracted from the matching stratakit components
52+
*/
53+
54+
select:not(.stratakit-mimic-button) {
55+
background: var(--stratakit-color-bg-neutral-base);
56+
padding: var(--stratakit-space-x1);
57+
border-radius: var(--stratakit-ext-radius-sm);
58+
cursor: pointer;
59+
border-color: var(--stratakit-color-border-shadow-base);
60+
margin: var(--stratakit-space-x1);
61+
62+
&:hover {
63+
border-color: color-mix(
64+
in oklch,
65+
var(--stratakit-color-border-shadow-base) 100%,
66+
var(--stratakit-color-glow-hue)
67+
var(--stratakit-color-border-glow-base-hover-\%)
68+
);
69+
background: color-mix(
70+
in oklch,
71+
var(--stratakit-color-bg-neutral-base) 100%,
72+
var(--stratakit-color-glow-hue)
73+
var(--stratakit-color-bg-glow-base-hover-\%)
74+
);
75+
}
76+
}
77+
78+
button:not(.stratakit-mimic-button) {
79+
/* Missing shadows and pressed, active and disabled states but "good enough" for now */
80+
background: var(--stratakit-color-bg-neutral-base);
81+
padding: var(--stratakit-space-x1) var(--stratakit-space-x3);
82+
border-radius: var(--stratakit-ext-radius-sm);
83+
border: var(--stratakit-ext-border-border) solid;
84+
border-color: var(--stratakit-color-border-shadow-base);
85+
line-height: 1.2;
86+
margin: var(--stratakit-space-x1);
87+
88+
&:hover {
89+
border-color: color-mix(
90+
in oklch,
91+
var(--stratakit-color-border-shadow-base) 100%,
92+
var(--stratakit-color-glow-hue)
93+
var(--stratakit-color-border-glow-base-hover-\%)
94+
);
95+
background: color-mix(
96+
in oklch,
97+
var(--stratakit-color-bg-neutral-base) 100%,
98+
var(--stratakit-color-glow-hue)
99+
var(--stratakit-color-bg-glow-base-hover-\%)
100+
);
101+
}
102+
}
103+
104+
input[type="text"],
105+
input[type="number"] {
106+
background: var(--stratakit-color-bg-page-base);
107+
border-radius: var(--stratakit-ext-radius-sm);
108+
border: var(--stratakit-ext-border-border) solid;
109+
border-color: var(--stratakit-color-border-neutral-base);
110+
padding-inline: var(--stratakit-space-x2);
111+
color: var(--stratakit-color-text-neutral-primary);
112+
113+
&[type="number"] {
114+
padding-right: 0;
115+
}
116+
117+
&:hover {
118+
background-color: color-mix(
119+
in oklch,
120+
var(--stratakit-color-bg-page-base) 100%,
121+
var(--stratakit-color-glow-hue)
122+
var(--stratakit-color-bg-glow-base-hover-\%)
123+
);
124+
border-color: color-mix(
125+
in oklch,
126+
var(--stratakit-color-border-neutral-base) 100%,
127+
var(--stratakit-color-glow-hue)
128+
var(--stratakit-color-border-glow-base-hover-\%)
129+
);
130+
}
131+
}

0 commit comments

Comments
 (0)