summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2024-06-26 16:53:07 +0200
committerVolpeon <git@volpeon.ink>2024-06-26 16:53:07 +0200
commitdd1ade8acc17d74a45240d255cb862009129b0ec (patch)
tree47fdc87cdcda8e8597c9d192d07ca5a97d375072 /src
parentAdd static themes to action button (diff)
downloadiro-design-dd1ade8acc17d74a45240d255cb862009129b0ec.tar.gz
iro-design-dd1ade8acc17d74a45240d255cb862009129b0ec.tar.bz2
iro-design-dd1ade8acc17d74a45240d255cb862009129b0ec.zip
Update
Diffstat (limited to 'src')
-rw-r--r--src/.old/objects/_action-menu.scss122
-rw-r--r--src/_config.scss3
-rw-r--r--src/_objects.scss6
-rw-r--r--src/objects/_action-menu.scss111
-rw-r--r--src/objects/_avatar.scss (renamed from src/.old/objects/_avatar.scss)84
-rw-r--r--src/objects/_status-indicator.scss (renamed from src/.old/objects/_status-indicator.scss)28
6 files changed, 174 insertions, 180 deletions
diff --git a/src/.old/objects/_action-menu.scss b/src/.old/objects/_action-menu.scss
deleted file mode 100644
index 12e3b5f..0000000
--- a/src/.old/objects/_action-menu.scss
+++ /dev/null
@@ -1,122 +0,0 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('action-menu') {
5 @include iro.props-store((
6 --dims: (
7 --pad-x: 0,
8 --pad-y: fn.global-dim(--size --85),
9 --separator: fn.global-dim(--size --85),
10 --rounding: 3px,
11 --border: 1px,
12 --item: (
13 --pad-x: fn.global-dim(--size --150),
14 --pad-y: fn.global-dim(--size --85),
15 ),
16 ),
17 ), 'dims');
18
19 @include iro.props-store((
20 --colors: (
21 --shadow: 0 .2em .5em rgba(#000, .1),
22 --border: fn.global-color(--border --stable-lo),
23 --separator: fn.global-color(--obj),
24 --icon: fn.global-color(--fg-hi),
25 --item: (
26 --hover: (
27 --bg: fn.global-color(--obj-hi),
28 --label: fn.global-color(--fg-lo),
29 ),
30 --disabled: (
31 --label: fn.global-color(--fg-hi3),
32 ),
33 --key-focus: (
34 --bg: fn.global-color(--obj-hi),
35 --label: fn.global-color(--fg-lo),
36 --border: fn.global-color(--focus --fill),
37 --shadow: fn.global-color(--focus --shadow),
38 ),
39 ),
40 ),
41 ), 'colors');
42
43 @include iro.props-store((
44 --colors: (
45 --shadow: 0 .2em .5em rgba(#000, .5),
46 ),
47 ), 'colors-dark');
48
49 @include iro.bem-object(iro.props-namespace()) {
50 position: absolute;
51 z-index: 10000;
52 top: 0;
53 left: 0;
54 padding: fn.dim(--pad-y) fn.dim(--pad-x);
55 transform: translate(var(--x), var(--y));
56 border: fn.dim(--border) solid fn.color(--border);
57 border-radius: fn.dim(--rounding);
58 background-clip: padding-box;
59 background-color: fn.global-color(--bg);
60 box-shadow: fn.color(--shadow);
61 color: fn.global-color(--fg);
62
63 @include iro.bem-modifier('up-left') {
64 transform: translate(var(--x), calc(var(--y) - 100%));
65 }
66
67 @include iro.bem-modifier('up-right') {
68 transform: translate(calc(var(--x) - 100%), calc(var(--y) - 100%));
69 }
70
71 @include iro.bem-modifier('down-right') {
72 transform: translate(calc(var(--x) - 100%), var(--y));
73 }
74
75 @include iro.bem-elem('item') {
76 display: block;
77 box-sizing: border-box;
78 width: 100%;
79 padding: calc(fn.dim(--item --pad-y) - 2px) calc(fn.dim(--item --pad-x) - 2px);
80 border: 2px solid transparent;
81 color: fn.color(--item --disabled --label);
82
83 &:link,
84 &:visited,
85 &:enabled {
86 color: currentColor;
87
88 &:hover,
89 &:active {
90 background-color: fn.color(--item --hover --bg);
91 color: fn.color(--item --hover --label);
92 }
93
94 @include iro.bem-at-theme('keyboard') {
95 &:focus {
96 border-radius: calc(fn.dim(--rounding) - 1px);
97 border-color: fn.color(--item --key-focus --border);
98 background-color: fn.color(--item --key-focus --bg);
99 box-shadow: fn.color(--item --key-focus --shadow);
100 color: fn.color(--item --key-focus --label);
101 }
102 }
103 }
104 }
105
106 @include iro.bem-elem('separator') {
107 height: 1px;
108 margin: fn.dim(--separator) 0;
109 background-color: fn.color(--separator);
110 }
111
112 @include iro.bem-elem('slot') {
113 padding: fn.dim(--item --pad-y) fn.dim(--item --pad-x);
114 }
115
116 @include iro.bem-elem('icon-slot') {
117 display: flex;
118 justify-content: center;
119 width: fn.foreign-dim(--icon, --size);
120 }
121 }
122}
diff --git a/src/_config.scss b/src/_config.scss
index f4f43fd..56a74e1 100644
--- a/src/_config.scss
+++ b/src/_config.scss
@@ -82,9 +82,6 @@ $semantic-colors-common: (
82 --focus-raw: --accent, 82 --focus-raw: --accent,
83 --focus-static: --accent-static, 83 --focus-static: --accent-static,
84 84
85 --light: --white-transparent,
86 --shadow: --black-transparent,
87
88 --border-mute: --base --200, 85 --border-mute: --base --200,
89 --border: --base --300, 86 --border: --base --300,
90 --border-strong: --base --400, 87 --border-strong: --base --400,
diff --git a/src/_objects.scss b/src/_objects.scss
index b1872c9..0973920 100644
--- a/src/_objects.scss
+++ b/src/_objects.scss
@@ -11,10 +11,10 @@
11@use 'objects/switch'; 11@use 'objects/switch';
12@use 'objects/action-button'; 12@use 'objects/action-button';
13// @use 'objects/overflow-button'; 13// @use 'objects/overflow-button';
14// @use 'objects/status-indicator'; 14@use 'objects/status-indicator';
15// @use 'objects/avatar'; 15@use 'objects/avatar';
16// @use 'objects/message'; 16// @use 'objects/message';
17// @use 'objects/action-menu'; 17@use 'objects/action-menu';
18// @use 'objects/menu'; 18// @use 'objects/menu';
19// @use 'objects/icon-nav'; 19// @use 'objects/icon-nav';
20// @use 'objects/backdrop'; 20// @use 'objects/backdrop';
diff --git a/src/objects/_action-menu.scss b/src/objects/_action-menu.scss
new file mode 100644
index 0000000..2a74834
--- /dev/null
+++ b/src/objects/_action-menu.scss
@@ -0,0 +1,111 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('action-menu') {
5 @include iro.props-store((
6 --dims: (
7 --pad-i: 0,
8 --pad-b: fn.global-dim(--size --85),
9 --separator: fn.global-dim(--size --85),
10 --rounding: fn.global-dim(--rounding),
11 --border: fn.global-dim(--border --thin),
12 --item: (
13 --pad-i: fn.global-dim(--size --150),
14 --pad-b: fn.global-dim(--size --85),
15 ),
16 ),
17 --colors: (
18 --bg: fn.global-color(--bg-l2),
19 --text: fn.global-color(--text),
20 --shadow: 0 .2em .5em rgba(#000, .1),
21 --border: fn.global-color(--border),
22 --separator: fn.global-color(--border),
23 --icon: fn.global-color(--text-mute),
24 --item: (
25 --hover: (
26 --bg: fn.global-color(--border-mute),
27 --label: fn.global-color(--heading),
28 ),
29 --disabled: (
30 --label: fn.global-color(--text-disabled),
31 ),
32 --key-focus: (
33 --border: fn.global-color(--focus --border),
34 --outline: fn.global-color(--focus --outline),
35 ),
36 ),
37 ),
38 ));
39
40 @include iro.bem-object(iro.props-namespace()) {
41 position: absolute;
42 z-index: 10000;
43 inset-block-start: 0;
44 inset-inline-start: 0;
45 padding-block: fn.dim(--pad-b);
46 padding-inline: fn.dim(--pad-i);
47 transform: translate(var(--x), var(--y));
48 border: fn.dim(--border) solid fn.color(--border);
49 border-radius: fn.dim(--rounding);
50 background-clip: padding-box;
51 background-color: fn.color(--bg);
52 box-shadow: fn.color(--shadow);
53 color: fn.color(--text);
54
55 @include iro.bem-modifier('up-left') {
56 transform: translate(var(--x), calc(var(--y) - 100%));
57 }
58
59 @include iro.bem-modifier('up-right') {
60 transform: translate(calc(var(--x) - 100%), calc(var(--y) - 100%));
61 }
62
63 @include iro.bem-modifier('down-right') {
64 transform: translate(calc(var(--x) - 100%), var(--y));
65 }
66
67 @include iro.bem-elem('item') {
68 display: block;
69 box-sizing: border-box;
70 inline-size: 100%;
71 padding-block: calc(fn.dim(--item --pad-b) - 2px);
72 padding-inline: calc(fn.dim(--item --pad-i) - 2px);
73 border: 2px solid transparent;
74 color: fn.color(--item --disabled --label);
75
76 &:link,
77 &:visited,
78 &:enabled {
79 color: currentColor;
80
81 &:hover,
82 &:active,
83 &:focus-visible {
84 background-color: fn.color(--item --hover --bg);
85 color: fn.color(--item --hover --label);
86 }
87
88 &:focus-visible {
89 border-color: fn.color(--item --key-focus --border);
90 }
91 }
92 }
93
94 @include iro.bem-elem('separator') {
95 block-size: 1px;
96 margin-block: fn.dim(--separator);
97 background-color: fn.color(--separator);
98 }
99
100 @include iro.bem-elem('slot') {
101 padding-block: fn.dim(--item --pad-b);
102 padding-inline: fn.dim(--item --pad-i);
103 }
104
105 @include iro.bem-elem('icon-slot') {
106 display: flex;
107 justify-content: center;
108 inline-size: fn.foreign-dim(--icon, --size);
109 }
110 }
111}
diff --git a/src/.old/objects/_avatar.scss b/src/objects/_avatar.scss
index 4be780e..e6fa74e 100644
--- a/src/.old/objects/_avatar.scss
+++ b/src/objects/_avatar.scss
@@ -1,16 +1,19 @@
1@use 'sass:list';
1@use 'iro-sass/src/index' as iro; 2@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn; 3@use '../functions' as fn;
3 4
4@mixin status($size) { 5$sizes: 'xs' 'sm' 'lg' 'xl' 'xxl' 'xxxl';
6
7@mixin status($size: ()) {
5 @include iro.bem-elem('status') { 8 @include iro.bem-elem('status') {
6 width: fn.dim(--#{$size} --indicator-size); 9 width: fn.dim(list.join($size, --indicator-size));
7 height: fn.dim(--#{$size} --indicator-size); 10 height: fn.dim(list.join($size, --indicator-size));
8 11
9 @include iro.bem-next-elem('content') { 12 @include iro.bem-next-elem('content') {
10 mask-image: radial-gradient( 13 mask-image: radial-gradient(
11 circle calc(.5 * fn.dim(--#{$size} --indicator-size) + fn.dim(--indicator-spacing)) at 14 circle calc(.5 * fn.dim(list.join($size, --indicator-size)) + fn.dim(--indicator-spacing)) at
12 calc(100% - .5 * fn.dim(--#{$size} --indicator-size)) 15 calc(100% - .5 * fn.dim(list.join($size, --indicator-size)))
13 calc(100% - .5 * fn.dim(--#{$size} --indicator-size)), 16 calc(100% - .5 * fn.dim(list.join($size, --indicator-size))),
14 transparent 95%, 17 transparent 95%,
15 #fff 18 #fff
16 ); 19 );
@@ -21,81 +24,84 @@
21@include iro.props-namespace('avatar') { 24@include iro.props-namespace('avatar') {
22 @include iro.props-store(( 25 @include iro.props-store((
23 --dims: ( 26 --dims: (
24 --400: ( 27 --size: fn.global-dim(--size --500),
28 --font-size: fn.global-dim(--font-size --100),
29 --indicator-size: fn.global-dim(--size --150),
30
31 --xxxl: (
25 --size: fn.global-dim(--size --1600), 32 --size: fn.global-dim(--size --1600),
26 --font-size: fn.global-dim(--font-size --800), 33 --font-size: fn.global-dim(--font-size --800),
27 --indicator-size: fn.global-dim(--size --400), 34 --indicator-size: fn.global-dim(--size --400),
28 ), 35 ),
29 --300: ( 36 --xxl: (
30 --size: fn.global-dim(--size --1200), 37 --size: fn.global-dim(--size --1200),
31 --font-size: fn.global-dim(--font-size --600), 38 --font-size: fn.global-dim(--font-size --600),
32 --indicator-size: fn.global-dim(--size --300), 39 --indicator-size: fn.global-dim(--size --300),
33 ), 40 ),
34 --200: ( 41 --xl: (
35 --size: fn.global-dim(--size --800), 42 --size: fn.global-dim(--size --800),
36 --font-size: fn.global-dim(--font-size --300), 43 --font-size: fn.global-dim(--font-size --300),
37 --indicator-size: fn.global-dim(--size --225), 44 --indicator-size: fn.global-dim(--size --225),
38 ), 45 ),
39 --150: ( 46 --lg: (
40 --size: fn.global-dim(--size --650), 47 --size: fn.global-dim(--size --650),
41 --font-size: fn.global-dim(--font-size --200), 48 --font-size: fn.global-dim(--font-size --200),
42 --indicator-size: fn.global-dim(--size --175), 49 --indicator-size: fn.global-dim(--size --175),
43 ), 50 ),
44 --100: ( 51 --sm: (
45 --size: fn.global-dim(--size --500),
46 --font-size: fn.global-dim(--font-size --100),
47 --indicator-size: fn.global-dim(--size --150),
48 ),
49 --75: (
50 --size: fn.global-dim(--size --375), 52 --size: fn.global-dim(--size --375),
51 --font-size: fn.global-dim(--font-size --75), 53 --font-size: fn.global-dim(--font-size --75),
52 --indicator-size: fn.global-dim(--size --125), 54 --indicator-size: fn.global-dim(--size --125),
53 ), 55 ),
54 --50: ( 56 --xs: (
55 --size: fn.global-dim(--size --250), 57 --size: fn.global-dim(--size --250),
56 --font-size: fn.global-dim(--font-size --50), 58 --font-size: fn.global-dim(--font-size --50),
57 --indicator-size: fn.global-dim(--size --100), 59 --indicator-size: fn.global-dim(--size --100),
58 ), 60 ),
59 --indicator-spacing: fn.global-dim(--size --40), 61 --indicator-spacing: fn.global-dim(--size --40),
60 --rounding: 25%, 62 --rounding: 25%,
63
64 --key-focus: (
65 --border: fn.global-dim(--key-focus --border),
66 --border-offset: fn.global-dim(--key-focus --border-offset),
67 --outline: fn.global-dim(--key-focus --outline),
68 ),
61 ), 69 ),
62 ), 'dims');
63
64 @include iro.props-store((
65 --colors: ( 70 --colors: (
66 --h: 354, 71 --h: 354,
67 --s: 44%, 72 --s: 44%,
68 --l: 45%, 73 --l: 45%,
69 74
70 --key-focus: ( 75 --key-focus: (
71 --border: fn.global-color(--focus --fill), 76 --border: fn.global-color(--focus --border),
72 --shadow: 0 0 0 calc(2px + fn.global-dim(--focus --outline-width)) fn.global-color(--accent --primary --quiet --obj-lo), 77 --outline: fn.global-color(--focus --outline),
73 ), 78 ),
74 ), 79 ),
75 ), 'colors'); 80 ));
76 81
77 @include iro.bem-object(iro.props-namespace()) { 82 @include iro.bem-object(iro.props-namespace()) {
78 display: inline-block; 83 display: inline-block;
79 position: relative; 84 position: relative;
85 border: fn.dim(--key-focus --border) solid transparent;
80 border-radius: fn.dim(--rounding); 86 border-radius: fn.dim(--rounding);
81 font-size: fn.dim(--100 --font-size); 87 font-size: fn.dim(--font-size);
82 font-style: normal; 88 font-style: normal;
83 vertical-align: .05em; 89 vertical-align: .05em;
84 90
85 @include iro.bem-elem('status') { 91 @include iro.bem-elem('status') {
86 position: absolute; 92 position: absolute;
87 right: 0; 93 inset-inline-end: 0;
88 bottom: 0; 94 inset-block-end: 0;
89 } 95 }
90 96
91 @include status(100); 97 @include status;
92 98
93 @include iro.bem-elem('content') { 99 @include iro.bem-elem('content') {
94 display: block; 100 display: block;
95 width: fn.dim(--100 --size); 101 inline-size: fn.dim(--size);
96 height: fn.dim(--100 --size); 102 block-size: fn.dim(--size);
97 border-radius: fn.dim(--rounding); 103 border-radius: fn.dim(--rounding);
98 line-height: fn.dim(--100 --size); 104 line-height: fn.dim(--size);
99 text-align: center; 105 text-align: center;
100 object-fit: cover; 106 object-fit: cover;
101 object-position: center center; 107 object-position: center center;
@@ -122,25 +128,23 @@
122 } 128 }
123 } 129 }
124 130
125 @each $size in 50 75 150 200 300 400 { 131 @each $size in $sizes {
126 @include iro.bem-modifier($size) { 132 @include iro.bem-modifier($size) {
127 font-size: fn.dim(--#{$size} --font-size); 133 font-size: fn.dim(--#{$size} --font-size);
128 134
129 @include status($size); 135 @include status(--#{$size});
130 136
131 @include iro.bem-elem('content') { 137 @include iro.bem-elem('content') {
132 width: fn.dim(--#{$size} --size); 138 inline-size: fn.dim(--#{$size} --size);
133 height: fn.dim(--#{$size} --size); 139 block-size: fn.dim(--#{$size} --size);
134 line-height: fn.dim(--#{$size} --size); 140 line-height: fn.dim(--#{$size} --size);
135 } 141 }
136 } 142 }
137 } 143 }
138 144
139 @include iro.bem-at-theme('keyboard') { 145 &:focus-visible {
140 &:focus { 146 outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border);
141 outline: 2px solid fn.color(--key-focus --border); 147 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline);
142 box-shadow: fn.color(--key-focus --shadow);
143 }
144 } 148 }
145 } 149 }
146} 150}
diff --git a/src/.old/objects/_status-indicator.scss b/src/objects/_status-indicator.scss
index d8ea9ef..4c5305e 100644
--- a/src/.old/objects/_status-indicator.scss
+++ b/src/objects/_status-indicator.scss
@@ -1,22 +1,26 @@
1@use 'iro-sass/src/index' as iro; 1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn; 2@use '../functions' as fn;
3 3
4$themes: 'accent' 'positive' 'negative' 'warning' !default;
5
4@include iro.props-namespace('status-indicator') { 6@include iro.props-namespace('status-indicator') {
5 @include iro.props-store(( 7 @include iro.props-store((
6 --dims: ( 8 --dims: (
7 --size: fn.global-dim(--size --125), 9 --size: fn.global-dim(--size --125),
8 ), 10 ),
9 ), 'dims');
10
11 @include iro.props-store((
12 --colors: ( 11 --colors: (
13 --default: fn.global-color(--obj-lo), 12 --default: fn.global-color(--border-strong),
14 --primary: fn.global-color(--fg), 13 --primary: fn.global-color(--text),
15 --green: fn.global-color(--green --solid --bg-hi),
16 --yellow: fn.global-color(--yellow --solid --bg-hi),
17 --red: fn.global-color(--red --solid --bg-hi),
18 ), 14 ),
19 ), 'colors'); 15 ));
16
17 @each $theme in $themes {
18 @include iro.props-store((
19 --colors: (
20 --#{$theme}: fn.global-color(--#{$theme}-static --800),
21 ),
22 ));
23 }
20 24
21 @include iro.bem-object(iro.props-namespace()) { 25 @include iro.bem-object(iro.props-namespace()) {
22 display: inline-block; 26 display: inline-block;
@@ -26,9 +30,9 @@
26 background-color: fn.color(--default); 30 background-color: fn.color(--default);
27 vertical-align: middle; 31 vertical-align: middle;
28 32
29 @each $color in 'primary' 'green' 'yellow' 'red' { 33 @each $theme in $themes {
30 @include iro.bem-is($color) { 34 @include iro.bem-is($theme) {
31 background-color: fn.color(--#{$color}); 35 background-color: fn.color(--#{$theme});
32 } 36 }
33 } 37 }
34 } 38 }
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-22 04:33:22 +0000