diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/_declare-vars.scss | 140 | ||||
| -rw-r--r-- | src/objects/_backdrop.scss | 1 | ||||
| -rw-r--r-- | src/objects/_dialog.scss | 2 |
3 files changed, 71 insertions, 72 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); |
