summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2022-02-13 19:54:26 +0100
committerVolpeon <git@volpeon.ink>2022-02-13 19:54:26 +0100
commit8fdc53f4c8125140624da087a2b05b60397e6c7e (patch)
tree4aeefaf2f8b5277932831eda3eda726d43571e73
parentImproved colors (diff)
downloadiro-design-8fdc53f4c8125140624da087a2b05b60397e6c7e.tar.gz
iro-design-8fdc53f4c8125140624da087a2b05b60397e6c7e.tar.bz2
iro-design-8fdc53f4c8125140624da087a2b05b60397e6c7e.zip
Fix dialog+backdrop
Diffstat
-rw-r--r--src/_declare-vars.scss150
-rw-r--r--src/objects/_backdrop.scss1
-rw-r--r--src/objects/_dialog.scss2
-rw-r--r--tpl/objects/text-field.pug52
4 files changed, 102 insertions, 103 deletions
diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss
index a9b4d0a..d81b299 100644
--- a/src/_declare-vars.scss
+++ b/src/_declare-vars.scss
@@ -67,93 +67,89 @@
67 67
68// 68//
69 69
70@include iro.fn-execute { 70@include iro.props-store((
71 @include iro.props-store(( 71 --colors: (
72 --colors: ( 72 --bg-hi2: fn.color(--gray --1, null), // Lightest background
73 --bg-hi2: fn.color(--gray --1, null), // Lightest background 73 --bg-hi: fn.color(--gray --2, null), // Lighter background
74 --bg-hi: fn.color(--gray --2, null), // Lighter background 74 --bg: fn.color(--gray --3, null), // Background
75 --bg: fn.color(--gray --3, null), // Background 75
76 76 --obj-hi: fn.color(--gray --4, null),
77 --obj-hi: fn.color(--gray --4, null), 77 --obj: fn.color(--gray --5, null),
78 --obj: fn.color(--gray --5, null), 78 --obj-lo: fn.color(--gray --6, null),
79 --obj-lo: fn.color(--gray --6, null), 79
80 80 --fg-hi3: fn.color(--gray --7, null), // Disabled text
81 --fg-hi3: fn.color(--gray --7, null), // Disabled text 81 --fg-hi2: fn.color(--gray --8, null), // Placeholder text
82 --fg-hi2: fn.color(--gray --8, null), // Placeholder text 82 --fg-hi: fn.color(--gray --9, null), // Faint text
83 --fg-hi: fn.color(--gray --9, null), // Faint text 83 --fg: fn.color(--gray --10, null), // Text
84 --fg: fn.color(--gray --10, null), // Text 84 --fg-lo: fn.color(--gray --11, null), // Strong text
85 --fg-lo: fn.color(--gray --11, null), // Strong text 85
86 86 --gray: ( --h: 220, --s: 5% ),
87 --gray: ( --h: 220, --s: 5% ), 87 --blue: fn.color-palette(blend.lch(48% 50 279)),
88 --blue: fn.color-palette(blend.lch(48% 50 279)), 88 --red: fn.color-palette(blend.lch(48% 50 23)),
89 --red: fn.color-palette(blend.lch(48% 50 23)), 89 --green: fn.color-palette(blend.lch(63% 50 147)),
90 --green: fn.color-palette(blend.lch(63% 50 147)), 90 --yellow: fn.color-palette(blend.lch(73% 50 80)),
91 --yellow: fn.color-palette(blend.lch(73% 50 80)), 91
92 92 --accent: (
93 --accent: ( 93 --primary: iro.props-ref('colors', --colors --blue),
94 --primary: iro.props-ref('colors', --colors --blue), 94 --error: iro.props-ref('colors', --colors --red),
95 --error: iro.props-ref('colors', --colors --red), 95 --success: iro.props-ref('colors', --colors --green),
96 --success: iro.props-ref('colors', --colors --green),
97 ),
98
99 --selection: (
100 --bg: fn.color(--accent --primary --selection, null),
101 --bg-img: fn.color(--accent --primary --semi, null),
102 --fg: fn.color(--accent --primary --fg, null),
103 ),
104
105 --focus: (
106 --shadow: 0 0 0 fn.dim(--focus-outline-width, null) fn.color(--accent --primary --semi, null),
107 --fill: fn.color(--accent --primary --bg, null),
108 --text: fn.color(--accent --primary --lo, null),
109 --fill-text: fn.color(--accent --primary --fg, null),
110 ),
111 ), 96 ),
112 ), 'colors');
113 97
114 @include iro.props-store(( 98 --selection: (
115 --colors: ( 99 --bg: fn.color(--accent --primary --selection, null),
116 --gray: fn.gray-palette(94%), 100 --bg-img: fn.color(--accent --primary --semi, null),
101 --fg: fn.color(--accent --primary --fg, null),
117 ), 102 ),
118 ), 'palette-light');
119 103
120 @include iro.props-store(( 104 --focus: (
121 --colors: ( 105 --shadow: 0 0 0 fn.dim(--focus-outline-width, null) fn.color(--accent --primary --semi, null),
122 --gray: fn.gray-palette(100%), 106 --fill: fn.color(--accent --primary --bg, null),
107 --text: fn.color(--accent --primary --lo, null),
108 --fill-text: fn.color(--accent --primary --fg, null),
123 ), 109 ),
124 ), 'palette-light-raised'); 110 ),
125} 111), 'colors');
126 112
127// 113@include iro.props-store((
114 --colors: (
115 --gray: fn.gray-palette(94%),
116 ),
117), 'palette-light');
128 118
129@include iro.fn-execute { 119@include iro.props-store((
130 @include iro.props-store(( 120 --colors: (
131 --colors: ( 121 --gray: fn.gray-palette(100%),
132 --blue: fn.color-palette(blend.lch(58% 60 279), -1), 122 ),
133 --red: fn.color-palette(blend.lch(58% 60 23), -1), 123), 'palette-light-raised');
134 --green: fn.color-palette(blend.lch(73% 60 147), -1),
135 --yellow: fn.color-palette(blend.lch(83% 60 80), -1),
136
137 --accent: (
138 --primary: iro.props-ref('colors-dark', --colors --blue),
139 --error: iro.props-ref('colors-dark', --colors --red),
140 --success: iro.props-ref('colors-dark', --colors --green),
141 ),
142 )
143 ), 'colors-dark');
144 124
145 @include iro.props-store(( 125//
146 --colors: (
147 --gray: fn.gray-palette(9%),
148 ),
149 ), 'palette-dark');
150 126
151 @include iro.props-store(( 127@include iro.props-store((
152 --colors: ( 128 --colors: (
153 --gray: fn.gray-palette(16%), 129 --blue: fn.color-palette(blend.lch(58% 60 279), -1),
130 --red: fn.color-palette(blend.lch(58% 60 23), -1),
131 --green: fn.color-palette(blend.lch(73% 60 147), -1),
132 --yellow: fn.color-palette(blend.lch(83% 60 80), -1),
133
134 --accent: (
135 --primary: iro.props-ref('colors-dark', --colors --blue),
136 --error: iro.props-ref('colors-dark', --colors --red),
137 --success: iro.props-ref('colors-dark', --colors --green),
154 ), 138 ),
155 ), 'palette-dark-raised'); 139 )
156} 140), 'colors-dark');
141
142@include iro.props-store((
143 --colors: (
144 --gray: fn.gray-palette(9%),
145 ),
146), 'palette-dark');
147
148@include iro.props-store((
149 --colors: (
150 --gray: fn.gray-palette(16%),
151 ),
152), 'palette-dark-raised');
157 153
158// 154//
159 155
diff --git a/src/objects/_backdrop.scss b/src/objects/_backdrop.scss
index 34ce46a..ddf4ea0 100644
--- a/src/objects/_backdrop.scss
+++ b/src/objects/_backdrop.scss
@@ -37,6 +37,7 @@
37 bottom: 0; 37 bottom: 0;
38 left: 0; 38 left: 0;
39 box-sizing: border-box; 39 box-sizing: border-box;
40 flex-direction: column;
40 padding: fn.dim(--pad-y) fn.dim(--pad-x); 41 padding: fn.dim(--pad-y) fn.dim(--pad-x);
41 background-color: fn.color(--bg); 42 background-color: fn.color(--bg);
42 } 43 }
diff --git a/src/objects/_dialog.scss b/src/objects/_dialog.scss
index 22325f4..45af8b6 100644
--- a/src/objects/_dialog.scss
+++ b/src/objects/_dialog.scss
@@ -25,6 +25,8 @@
25 grid-template-rows: auto auto 1fr auto; 25 grid-template-rows: auto auto 1fr auto;
26 grid-template-areas: 'header' 'rule' 'body' 'footer'; 26 grid-template-areas: 'header' 'rule' 'body' 'footer';
27 position: relative; 27 position: relative;
28 box-sizing: border-box;
29 width: 100%;
28 max-width: fn.dim(--width-md); 30 max-width: fn.dim(--width-md);
29 margin: 0 auto; 31 margin: 0 auto;
30 padding: fn.dim(--pad-y) fn.dim(--pad-x); 32 padding: fn.dim(--pad-y) fn.dim(--pad-x);
diff --git a/tpl/objects/text-field.pug b/tpl/objects/text-field.pug
index d33d3b2..2e9827b 100644
--- a/tpl/objects/text-field.pug
+++ b/tpl/objects/text-field.pug
@@ -1,33 +1,33 @@
1include icon.pug 1include icon.pug
2 2
3mixin text-field 3mixin text-field
4 - const slots = {} 4 - const slots = {}
5 5
6 mixin slot(key) 6 mixin slot(key)
7 - slots[key] = block 7 - slots[key] = block
8 8
9 - 9 -
10 block ? block() : undefined 10 block ? block() : undefined
11 11
12 let classes = { 12 let classes = {
13 'o-text-field': true, 13 'o-text-field': true,
14 'o-text-field--ext': attributes.ext, 14 'o-text-field--ext': attributes.ext,
15 'is-invalid': attributes.invalid, 15 'is-invalid': attributes.invalid,
16 'is-disabled': attributes.disabled, 16 'is-disabled': attributes.disabled,
17 'l-card': !!block, 17 'l-card': !!block,
18 'l-card--flush': !!block, 18 'l-card--flush': !!block,
19 'l-card--gapless': !!block, 19 'l-card--gapless': !!block,
20 'u-p-xs': !!block 20 'u-p-xs': !!block
21 } 21 }
22 22
23 div(class=classes aria-disabled=attributes.disabled && String(attributes.disabled)) 23 div(class=classes aria-disabled=attributes.disabled && String(attributes.disabled))
24 if !!block 24 if !!block
25 if slots.pre 25 if slots.pre
26 - slots.pre() 26 - slots.pre()
27 input.o-text-field__native.l-card__block.l-card__block--main&attributes(attributes) 27 input.o-text-field__native.l-card__block.l-card__block--main&attributes(attributes)
28 if slots.post 28 if slots.post
29 - slots.post() 29 - slots.post()
30 .o-text-field__bg 30 .o-text-field__bg
31 else 31 else
32 input.o-text-field__native&attributes(attributes) 32 input.o-text-field__native&attributes(attributes)
33 .o-text-field__bg 33 .o-text-field__bg
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-22 07:00:14 +0000