diff options
-rw-r--r-- | src/_declare-vars.scss | 150 | ||||
-rw-r--r-- | src/objects/_backdrop.scss | 1 | ||||
-rw-r--r-- | src/objects/_dialog.scss | 2 | ||||
-rw-r--r-- | tpl/objects/text-field.pug | 52 |
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 @@ | |||
1 | include icon.pug | 1 | include icon.pug |
2 | 2 | ||
3 | mixin text-field | 3 | mixin 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 |