Skip to content

Commit 1f53500

Browse files
arthu-prarthu-pr
committed
Box component
1 parent ba6acc3 commit 1f53500

40 files changed

Lines changed: 1539 additions & 56 deletions

‎.prettierrc‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,5 +5,11 @@
55
"singleQuote": true,
66
"trailingComma": "all",
77
"bracketSpacing": true,
8-
"plugins": ["prettier-plugin-organize-imports"]
8+
"plugins": ["prettier-plugin-organize-imports"],
9+
"overrides": [
10+
{
11+
"files": ["**/*properties.css", "**/*tokens.css"],
12+
"options": { "printWidth": 200 }
13+
}
14+
]
915
}

‎.storybook/preview.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import type { Preview } from '@storybook/vue3-vite'
22
import { AppCompose, Wrapper, type YTheme } from '../src'
3+
// Supports weights 100-900
4+
import '@fontsource-variable/roboto'
35

46
const theme: YTheme = {
57
primary: '#e3c567',

‎package-lock.json‎

Lines changed: 10 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@
3232
"test": "vitest"
3333
},
3434
"dependencies": {
35+
"@fontsource-variable/roboto": "^5.2.9",
3536
"compression": "1.8.1",
3637
"culori": "4.0.1",
3738
"express": "5.1.0",

‎src/assets/css/base/fonts.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
}
3636

3737
body {
38-
font-family: 'Roboto Slab', serif;
38+
font-family: 'Roboto Variable', sans-serif;
3939
/* font-family: gotham; */
4040
}
4141

‎src/assets/css/base/reset.css‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
/*
2+
Josh's Custom CSS Reset
3+
https://www.joshwcomeau.com/css/custom-css-reset/
4+
*/
5+
6+
*,
7+
*::before,
8+
*::after {
9+
box-sizing: border-box;
10+
}
11+
12+
* {
13+
margin: 0;
14+
}
15+
16+
body {
17+
line-height: 1.5;
18+
-webkit-font-smoothing: antialiased;
19+
}
20+
21+
img,
22+
picture,
23+
video,
24+
canvas,
25+
svg {
26+
display: block;
27+
max-width: 100%;
28+
}
29+
30+
input,
31+
button,
32+
textarea,
33+
select {
34+
font: inherit;
35+
}
36+
37+
p,
38+
h1,
39+
h2,
40+
h3,
41+
h4,
42+
h5,
43+
h6 {
44+
overflow-wrap: break-word;
45+
}
46+
47+
p {
48+
text-wrap: pretty;
49+
}
50+
h1,
51+
h2,
52+
h3,
53+
h4,
54+
h5,
55+
h6 {
56+
text-wrap: balance;
57+
}
58+
59+
#root,
60+
#__next {
61+
isolation: isolate;
62+
}
63+
64+
/* CUSTOM */
65+
ul,
66+
ol {
67+
list-style-type: none;
68+
padding: 0;
69+
margin: 0;
70+
}

‎src/assets/css/global.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,16 @@
22
/* @import './base/variants.css'; */
33
@import './base/component/component.css';
44
@import './base/fonts.css';
5+
6+
/* TODO: */
7+
/* @import './base/reset.css'; */
58
/* @import './base/variables.css'; */
69
@import './utils/animations.css';
710
@import './components/common.css';
811
@import './components/table.css';
912
/* @import './themes/private-theme.css'; */
1013
/* @import './themes/public-theme.css'; */
14+
@import './themes/core.css';
1115
@import './theme.css';
1216
@import './themes/compose-ui/compose-ui-base.css';
1317
@import './themes/compose-ui/compose-ui.state.css';

‎src/assets/css/theme.css‎

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@
22
syntax: '<color>';
33
inherits: true;
44
} */
5-
@import url('./tokens/css/variants.css') layer(theme-api);
5+
@import url('./themes/tokens/css/variants.css') layer(theme-api);
66

77
/*
88
* CSS Type Grinding - https://www.bitovi.com/blog/css-only-type-grinding-casting-tokens-into-useful-values
99
*/
10-
@layer state;
10+
/* @layer state; */
1111

1212
/*
1313
* Color Properties
@@ -378,7 +378,6 @@
378378
}
379379

380380
[data-compose-ui].base {
381-
/* base default */
382381
--s-bg-l: var(--state-base-bg-lightness);
383382
--s-bg-c: var(--state-base-bg-chroma);
384383
--s-bg-h: var(--state-base-bg-hue);
@@ -397,7 +396,6 @@
397396

398397
[data-compose-ui]:hover,
399398
[data-compose-ui].hover {
400-
/* hover */
401399
--s-bg-l: var(--state-hover-bg-lightness);
402400
--s-bg-c: var(--state-hover-bg-chroma);
403401
--s-bg-h: var(--state-hover-bg-hue);
@@ -416,7 +414,6 @@
416414

417415
[data-compose-ui]:active,
418416
[data-compose-ui].active {
419-
/* active */
420417
--s-bg-l: var(--state-active-bg-lightness);
421418
--s-bg-c: var(--state-active-bg-chroma);
422419
--s-bg-h: var(--state-active-bg-hue);
@@ -437,7 +434,6 @@
437434
[data-compose-ui]:focus-visible,
438435
[data-compose-ui].focus-visible,
439436
[data-compose-ui].focus {
440-
/* focus */
441437
--s-bg-l: var(--state-focus-bg-lightness);
442438
--s-bg-c: var(--state-focus-bg-chroma);
443439
--s-bg-h: var(--state-focus-bg-hue);
@@ -457,7 +453,6 @@
457453
[data-compose-ui]:disabled,
458454
[data-compose-ui].disabled,
459455
[data-compose-ui][disabled] {
460-
/* disabled */
461456
--s-bg-l: var(--state-disabled-bg-lightness);
462457
--s-bg-c: var(--state-disabled-bg-chroma);
463458
--s-bg-h: var(--state-disabled-bg-hue);
@@ -548,6 +543,12 @@
548543
calc(var(--active) * 100% + var(--focus) * 100% + var(--disabled) * 100%)
549544
);
550545
--shadow-dark: var(--color-main-dark);
546+
/* --component-shadow-depth: calc(
547+
var(--is-state-base) * var(--_component-shadow-base) + var(--is-state-hover) *
548+
var(--_component-shadow-hover) + var(--is-state-active) * var(--_component-shadow-active) +
549+
var(--is-state-focus) * var(--_component-shadow-focus) + var(--is-state-disabled) *
550+
var(--_component-shadow-disabled) - 1 * var(--_component-transform-depth)
551+
); */
551552
--component-shadow-depth: calc(
552553
var(--base) * var(--_component-shadow-base) + var(--hover) * var(--_component-shadow-hover) +
553554
var(--active) * var(--_component-shadow-active) + var(--focus) *
@@ -564,6 +565,12 @@
564565
/**
565566
* Component Transform
566567
*/
568+
/* --_component-transform-depth: calc(
569+
var(--_component-transform-base) * var(--is-state-base) + var(--_component-transform-hover) *
570+
var(--is-state-hover) + var(--_component-transform-active) * var(--is-state-active) +
571+
var(--_component-transform-focus) * var(--is-state-focus) +
572+
var(--_component-transform-disabled) * var(--is-state-disabled)
573+
); */
567574
--_component-transform-depth: calc(
568575
var(--_component-transform-base) * var(--base) + var(--_component-transform-hover) *
569576
var(--hover) + var(--_component-transform-active) * var(--active) +

‎src/assets/css/themes/compose-ui/compose-ui-base.css‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
@import url('../../tokens/css/themes/public-theme.css') layer(theme);
2-
@import url('../../tokens/css/themes/private-theme.css') layer(theme);
3-
@import url('../../tokens/css/space.css') layer(theme);
1+
/* @import url('../tokens/css/themes/public-theme.css') layer(theme);
2+
@import url('../tokens/css/themes/private-theme.css') layer(theme);
3+
@import url('../tokens/css/space.css') layer(theme);
44
5-
@layer colors, theme-default, theme, cube;
5+
@layer props, api, engine, colors, theme-default, theme, cube; */
66
@layer theme {
77
:root {
88
--text-xs: var(--font-scale-0);
@@ -84,7 +84,7 @@
8484
/* Components */
8585
--_component-padding-x: var(--_button-padding-x);
8686
--_component-padding-y: var(--_button-padding-y);
87-
padding: var(--_component-padding-x) var(--_component-padding-y);
87+
padding: var(--_component-pading, var(--_component-padding-y) var(--_component-padding-x));
8888

8989
--_component-border-width: calc(var(--border-width-xsmall) * var(--styled));
9090

‎src/assets/css/themes/compose-ui/compose-ui.state.css‎

Lines changed: 62 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/* state.css */
2-
@layer props, state, engine;
2+
@layer props, api, engine;
33

44
/* -----------------------------------------------------------------------------
55
* PROPS
@@ -36,12 +36,39 @@
3636
/* -----------------------------------------------------------------------------
3737
* STATE (only sets --state)
3838
* -------------------------------------------------------------------------- */
39-
@layer state {
40-
/**
41-
* IMPORTANT: avoid unscoped :hover/:active/:focus rules.
42-
* Only apply to the component root, otherwise everything on the page can inherit it.
43-
*/
39+
@layer api {
40+
[data-compose-ui] {
41+
/* disabled wins */
42+
&.disabled,
43+
&:disabled,
44+
&[disabled] {
45+
--state: disabled;
46+
}
47+
48+
/* interactive states only when not disabled */
49+
/* No need for `base` as it's the fallback */
50+
&:not([disabled]):not(.disabled) {
51+
&.focus,
52+
&.focus-visible,
53+
&:focus,
54+
&:focus-visible {
55+
--state: focus;
56+
}
57+
58+
&.active,
59+
&:active {
60+
--state: active;
61+
}
62+
63+
&.hover,
64+
&:hover {
65+
--state: hover;
66+
}
67+
}
68+
}
69+
}
4470

71+
/*
4572
[data-compose-ui]:not([disabled]):not(.disabled):not(:hover):not(:active):not(:focus):not(
4673
:focus-visible
4774
),
@@ -70,26 +97,26 @@
7097
[data-compose-ui]:disabled,
7198
[data-compose-ui].disabled {
7299
--state: disabled;
73-
}
100+
} */
74101

75-
/**
102+
/**
76103
* If you REALLY need “child is hovered/focused sets parent state”, keep :has()
77104
* but scope it to the root only:
78105
*/
79-
[data-compose-ui]:has(:hover, .hover) {
80-
--state: hover;
81-
}
82-
[data-compose-ui]:has(:active, .active) {
83-
--state: active;
84-
}
85-
[data-compose-ui]:has(:focus-visible, :focus, .focus-visible, .focus) {
86-
--state: focus;
87-
}
88-
[data-compose-ui]:has(.disabled, :disabled, [disabled]) {
89-
--state: disabled;
90-
}
91-
}
92-
106+
/* [data-compose-ui]:has(:hover, .hover) {
107+
--state: hover;
108+
}
109+
[data-compose-ui]:has(:active, .active) {
110+
--state: active;
111+
}
112+
[data-compose-ui]:has(:focus-visible, :focus, .focus-visible, .focus) {
113+
--state: focus;
114+
}
115+
[data-compose-ui]:has(.disabled, :disabled, [disabled]) {
116+
--state: disabled;
117+
} */
118+
/* }
119+
} */
93120
/* -----------------------------------------------------------------------------
94121
* ENGINE (grind -> bits, map -> s-* deltas)
95122
* -------------------------------------------------------------------------- */
@@ -113,6 +140,19 @@
113140
--_state-disabled-else-0: var(--state);
114141
--is-state-disabled: var(--_state-disabled-else-0);
115142

143+
--_component-transform-depth: calc(
144+
var(--_component-transform-base) * var(--is-state-base) + var(--_component-transform-hover) *
145+
var(--is-state-hover) + var(--_component-transform-active) * var(--is-state-active) +
146+
var(--_component-transform-focus) * var(--is-state-focus) +
147+
var(--_component-transform-disabled) * var(--is-state-disabled)
148+
);
149+
150+
--component-shadow-depth: calc(
151+
var(--is-state-base) * var(--_component-shadow-base) + var(--is-state-hover) *
152+
var(--_component-shadow-hover) + var(--is-state-active) * var(--_component-shadow-active) +
153+
var(--is-state-focus) * var(--_component-shadow-focus) + var(--is-state-disabled) *
154+
var(--_component-shadow-disabled) - 1 * var(--_component-transform-depth)
155+
);
116156
/**
117157
* 2) Map state deltas (weighted sums)
118158
* Uses your existing state token names.

0 commit comments

Comments
 (0)