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.scss140
-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, 97 insertions, 98 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
76
77 --obj-hi: fn.color(--gray --4, null),
78 --obj: fn.color(--gray --5, null),
79 --obj-lo: fn.color(--gray --6, null),
80
81 --fg-hi3: fn.color(--gray --7, null), // Disabled text
82 --fg-hi2: fn.color(--gray --8, null), // Placeholder text
83 --fg-hi: fn.color(--gray --9, null), // Faint text
84 --fg: fn.color(--gray --10, null), // Text
85 --fg-lo: fn.color(--gray --11, null), // Strong text
86 75
87 --gray: ( --h: 220, --s: 5% ), 76 --obj-hi: fn.color(--gray --4, null),
88 --blue: fn.color-palette(blend.lch(48% 50 279)), 77 --obj: fn.color(--gray --5, null),
89 --red: fn.color-palette(blend.lch(48% 50 23)), 78 --obj-lo: fn.color(--gray --6, null),
90 --green: fn.color-palette(blend.lch(63% 50 147)),
91 --yellow: fn.color-palette(blend.lch(73% 50 80)),
92 79
93 --accent: ( 80 --fg-hi3: fn.color(--gray --7, null), // Disabled text
94 --primary: iro.props-ref('colors', --colors --blue), 81 --fg-hi2: fn.color(--gray --8, null), // Placeholder text
95 --error: iro.props-ref('colors', --colors --red), 82 --fg-hi: fn.color(--gray --9, null), // Faint text
96 --success: iro.props-ref('colors', --colors --green), 83 --fg: fn.color(--gray --10, null), // Text
97 ), 84 --fg-lo: fn.color(--gray --11, null), // Strong text
98 85
99 --selection: ( 86 --gray: ( --h: 220, --s: 5% ),
100 --bg: fn.color(--accent --primary --selection, null), 87 --blue: fn.color-palette(blend.lch(48% 50 279)),
101 --bg-img: fn.color(--accent --primary --semi, null), 88 --red: fn.color-palette(blend.lch(48% 50 23)),
102 --fg: fn.color(--accent --primary --fg, null), 89 --green: fn.color-palette(blend.lch(63% 50 147)),
103 ), 90 --yellow: fn.color-palette(blend.lch(73% 50 80)),
104 91
105 --focus: ( 92 --accent: (
106 --shadow: 0 0 0 fn.dim(--focus-outline-width, null) fn.color(--accent --primary --semi, null), 93 --primary: iro.props-ref('colors', --colors --blue),
107 --fill: fn.color(--accent --primary --bg, null), 94 --error: iro.props-ref('colors', --colors --red),
108 --text: fn.color(--accent --primary --lo, null), 95 --success: iro.props-ref('colors', --colors --green),
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');
118
119@include iro.props-store((
120 --colors: (
121 --gray: fn.gray-palette(100%),
122 ),
123), 'palette-light-raised');
128 124
129@include iro.fn-execute { 125//
130 @include iro.props-store((
131 --colors: (
132 --blue: fn.color-palette(blend.lch(58% 60 279), -1),
133 --red: fn.color-palette(blend.lch(58% 60 23), -1),
134 --green: fn.color-palette(blend.lch(73% 60 147), -1),
135 --yellow: fn.color-palette(blend.lch(83% 60 80), -1),
136 126
137 --accent: ( 127@include iro.props-store((
138 --primary: iro.props-ref('colors-dark', --colors --blue), 128 --colors: (
139 --error: iro.props-ref('colors-dark', --colors --red), 129 --blue: fn.color-palette(blend.lch(58% 60 279), -1),
140 --success: iro.props-ref('colors-dark', --colors --green), 130 --red: fn.color-palette(blend.lch(58% 60 23), -1),
141 ), 131 --green: fn.color-palette(blend.lch(73% 60 147), -1),
142 ) 132 --yellow: fn.color-palette(blend.lch(83% 60 80), -1),
143 ), 'colors-dark');
144 133
145 @include iro.props-store(( 134 --accent: (
146 --colors: ( 135 --primary: iro.props-ref('colors-dark', --colors --blue),
147 --gray: fn.gray-palette(9%), 136 --error: iro.props-ref('colors-dark', --colors --red),
137 --success: iro.props-ref('colors-dark', --colors --green),
148 ), 138 ),
149 ), 'palette-dark'); 139 )
140), 'colors-dark');
150 141
151 @include iro.props-store(( 142@include iro.props-store((
152 --colors: ( 143 --colors: (
153 --gray: fn.gray-palette(16%), 144 --gray: fn.gray-palette(9%),
154 ), 145 ),
155 ), 'palette-dark-raised'); 146), 'palette-dark');
156} 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.50.0) at 2025-07-02 01:36:45 +0000