head 0.0.7 → 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/CHANGELOG.md +2 -0
- data/app/assets/stylesheets/head/components/knob.sass +4 -5
- data/app/assets/stylesheets/head/components/sidebar.sass +10 -11
- data/app/assets/stylesheets/head/components/theater.sass +3 -4
- data/app/assets/stylesheets/head/components/wing.sass +2 -3
- data/app/assets/stylesheets/head/elements/root.sass +25 -0
- data/app/assets/stylesheets/head/index.sass +2 -0
- data/app/assets/stylesheets/head/tools/_scheme.sass +30 -0
- data/app/assets/stylesheets/head/utilities/smokescreen.sass +1 -3
- data/lib/head/version.rb +1 -1
- metadata +3 -4
- data/app/assets/stylesheets/head/settings/_colors.sass +0 -15
- data/app/assets/stylesheets/head/tools/_mandatory.sass +0 -6
- data/app/assets/stylesheets/head/tools/_theme.sass +0 -3
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: b90616d05e6aa8a11544a674c3841509beccc6e995879527033f0cd0dfc0f499
|
|
4
|
+
data.tar.gz: 3889a2b26eb6e70c168780d65f15e277b2a8809a67114e26fb8f6a9c50d7d176
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 8df10d170a9ecd7a460b37de46dad539f54f3835ac7ff5dd249ca84d713fea3bcc082dd77f2f70b6e9af4bcb89129edb402c9ba024369be011ba167d7fe4d2f9
|
|
7
|
+
data.tar.gz: 4a0f242970d0eec9b0f6cf1d5dcbe165a44da019e09996c002ffc949d3e48cb17498380ca71a909664d87c04ea9b015db085ba655cada0315b5bc89f05e0fada
|
data/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
## [Unreleased]
|
|
2
2
|
|
|
3
|
+
- Replace Sass color variables (`head/settings/colors`) with `--head-color-*` CSS custom properties in a new `head/elements/root.sass`. The chrome defaults to dark backgrounds with light text in both light and dark schemes; consuming apps can override the tokens per scheme. Breaking: `head/settings/colors` is removed.
|
|
4
|
+
|
|
3
5
|
## [0.0.6] - 2026-04-29
|
|
4
6
|
|
|
5
7
|
- Fix rails complaining about require'ing view_component too early
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
@use "iglu/responsive"
|
|
2
2
|
@use "iglu/font-size"
|
|
3
3
|
@use "iglu/spacing"
|
|
4
|
-
@use "head/settings/colors"
|
|
5
4
|
@use "head/tools/link"
|
|
6
5
|
|
|
7
6
|
.c-head-knob
|
|
@@ -13,13 +12,13 @@
|
|
|
13
12
|
+font-size.gigantic
|
|
14
13
|
|
|
15
14
|
+link.states
|
|
16
|
-
color:
|
|
15
|
+
color: var(--head-color-knob)
|
|
17
16
|
|
|
18
17
|
&:hover
|
|
19
|
-
color:
|
|
18
|
+
color: var(--head-color-knob-hover)
|
|
20
19
|
|
|
21
20
|
&:active
|
|
22
|
-
color:
|
|
21
|
+
color: var(--head-color-text)
|
|
23
22
|
|
|
24
23
|
&--mainmenu
|
|
25
24
|
display: grid
|
|
@@ -51,7 +50,7 @@
|
|
|
51
50
|
height: 100%
|
|
52
51
|
object-fit: contain
|
|
53
52
|
clip-path: circle()
|
|
54
|
-
background-color:
|
|
53
|
+
background-color: var(--head-color-avatar-bg)
|
|
55
54
|
|
|
56
55
|
|
|
57
56
|
// Keep this breakpoint analogous to wing.sass
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
@use "iglu/spacing"
|
|
2
2
|
@use "iglu/font-size"
|
|
3
|
-
@use "head/settings/colors"
|
|
4
3
|
@use "head/tools/link"
|
|
5
4
|
|
|
6
5
|
.c-head-sidebar
|
|
@@ -19,7 +18,7 @@
|
|
|
19
18
|
|
|
20
19
|
&__secondary
|
|
21
20
|
overflow: hidden
|
|
22
|
-
background-color:
|
|
21
|
+
background-color: var(--head-color-bg-hover)
|
|
23
22
|
height: 100%
|
|
24
23
|
|
|
25
24
|
&__category
|
|
@@ -37,14 +36,14 @@
|
|
|
37
36
|
grid-area: #{$column}
|
|
38
37
|
|
|
39
38
|
+link.states
|
|
40
|
-
color:
|
|
39
|
+
color: var(--head-color-text-muted)
|
|
41
40
|
|
|
42
41
|
&:hover
|
|
43
|
-
color:
|
|
42
|
+
color: var(--head-color-text)
|
|
44
43
|
|
|
45
44
|
&.is-active
|
|
46
|
-
color:
|
|
47
|
-
background-color:
|
|
45
|
+
color: var(--head-color-text)
|
|
46
|
+
background-color: var(--head-color-bg-hover)
|
|
48
47
|
|
|
49
48
|
&-icon
|
|
50
49
|
text-align: center
|
|
@@ -76,17 +75,17 @@
|
|
|
76
75
|
grid-area: #{$column}
|
|
77
76
|
|
|
78
77
|
+link.states
|
|
79
|
-
color:
|
|
78
|
+
color: var(--head-color-text-muted)
|
|
80
79
|
|
|
81
80
|
&:hover
|
|
82
|
-
color:
|
|
81
|
+
color: var(--head-color-text)
|
|
83
82
|
|
|
84
83
|
&:active
|
|
85
|
-
color:
|
|
84
|
+
color: var(--head-color-text)
|
|
86
85
|
|
|
87
86
|
&.is-active
|
|
88
|
-
color:
|
|
89
|
-
background-color:
|
|
87
|
+
color: var(--head-color-text)
|
|
88
|
+
background-color: var(--head-color-bg-hover)
|
|
90
89
|
|
|
91
90
|
&-name
|
|
92
91
|
white-space: nowrap
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
@use "iglu/spacing"
|
|
2
|
-
@use "head/settings/colors"
|
|
3
2
|
@use "iglu/font-size"
|
|
4
3
|
|
|
5
4
|
.c-head-theater
|
|
@@ -8,12 +7,12 @@
|
|
|
8
7
|
grid-template-rows: auto 1fr
|
|
9
8
|
|
|
10
9
|
&__roof
|
|
11
|
-
background-color:
|
|
10
|
+
background-color: var(--head-color-bg)
|
|
12
11
|
display: grid
|
|
13
12
|
line-height: 1 // Conformity of knobs
|
|
14
13
|
align-items: center
|
|
15
14
|
// Keep Logo centered even if left and right menus differ in width
|
|
16
|
-
grid-template-columns: 1fr
|
|
15
|
+
grid-template-columns: 1fr auto 1fr
|
|
17
16
|
grid-template-areas: "knobs--left logo knobs--right"
|
|
18
17
|
|
|
19
18
|
@each $column in knobs--left logo knobs--right
|
|
@@ -35,7 +34,7 @@
|
|
|
35
34
|
display: flex
|
|
36
35
|
justify-content: center
|
|
37
36
|
position: relative
|
|
38
|
-
color:
|
|
37
|
+
color: var(--head-color-text)
|
|
39
38
|
padding: 0.3rem
|
|
40
39
|
overflow: auto // Clip wide logos on small screens
|
|
41
40
|
+font-size.gigantic
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
@use "iglu/responsive"
|
|
2
|
-
@use "head/settings/colors"
|
|
3
2
|
|
|
4
3
|
.c-head-wing
|
|
5
4
|
display: none
|
|
@@ -11,8 +10,8 @@
|
|
|
11
10
|
height: 100%
|
|
12
11
|
z-index: 1000
|
|
13
12
|
position: absolute
|
|
14
|
-
background:
|
|
15
|
-
color:
|
|
13
|
+
background: var(--head-color-bg)
|
|
14
|
+
color: var(--head-color-text)
|
|
16
15
|
|
|
17
16
|
&--right
|
|
18
17
|
right: 0
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
@use "../tools/scheme"
|
|
2
|
+
|
|
3
|
+
// The head chrome defaults to dark backgrounds with light text in both
|
|
4
|
+
// schemes, so that navigation stays readable against any host background.
|
|
5
|
+
// Consumers override these tokens per scheme, e.g. in their own root scope.
|
|
6
|
+
|
|
7
|
+
+scheme.root-light
|
|
8
|
+
--head-color-bg: rgb(70, 70, 70)
|
|
9
|
+
--head-color-bg-hover: rgba(255, 255, 255, 0.14)
|
|
10
|
+
--head-color-text: #fff
|
|
11
|
+
--head-color-text-muted: rgb(236, 236, 236)
|
|
12
|
+
--head-color-knob: rgb(183, 183, 183)
|
|
13
|
+
--head-color-knob-hover: rgb(198, 198, 198)
|
|
14
|
+
--head-color-avatar-bg: #fff
|
|
15
|
+
--head-color-smokescreen: rgba(100, 100, 100, 0.5)
|
|
16
|
+
|
|
17
|
+
+scheme.root-dark
|
|
18
|
+
--head-color-bg: rgb(70, 70, 70)
|
|
19
|
+
--head-color-bg-hover: rgba(255, 255, 255, 0.14)
|
|
20
|
+
--head-color-text: #fff
|
|
21
|
+
--head-color-text-muted: rgb(236, 236, 236)
|
|
22
|
+
--head-color-knob: rgb(183, 183, 183)
|
|
23
|
+
--head-color-knob-hover: rgb(198, 198, 198)
|
|
24
|
+
--head-color-avatar-bg: #fff
|
|
25
|
+
--head-color-smokescreen: rgba(100, 100, 100, 0.5)
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
// ----------------------
|
|
2
|
+
// Defining global scheme
|
|
3
|
+
// ----------------------
|
|
4
|
+
|
|
5
|
+
=root-light
|
|
6
|
+
// We default to light.
|
|
7
|
+
\:root
|
|
8
|
+
color-scheme: light
|
|
9
|
+
@content
|
|
10
|
+
|
|
11
|
+
// We can override any dark if we want to.
|
|
12
|
+
// Override dark media query via t-light.
|
|
13
|
+
.t-light
|
|
14
|
+
color-scheme: light
|
|
15
|
+
@content
|
|
16
|
+
|
|
17
|
+
=root-dark
|
|
18
|
+
// If the media query says dark, be dark.
|
|
19
|
+
// But allow for override via t-light.
|
|
20
|
+
\:root
|
|
21
|
+
@media (prefers-color-scheme: dark)
|
|
22
|
+
&:not(.t-light)
|
|
23
|
+
color-scheme: dark
|
|
24
|
+
@content
|
|
25
|
+
|
|
26
|
+
// We can override any light if we want to.
|
|
27
|
+
// For example <html class="t-dark"> as user preference from DB.
|
|
28
|
+
.t-dark
|
|
29
|
+
color-scheme: dark
|
|
30
|
+
@content
|
data/lib/head/version.rb
CHANGED
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: head
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.0
|
|
4
|
+
version: 1.0.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- halo
|
|
@@ -127,18 +127,17 @@ files:
|
|
|
127
127
|
- app/assets/stylesheets/head/components/sidebar.sass
|
|
128
128
|
- app/assets/stylesheets/head/components/theater.sass
|
|
129
129
|
- app/assets/stylesheets/head/components/wing.sass
|
|
130
|
+
- app/assets/stylesheets/head/elements/root.sass
|
|
130
131
|
- app/assets/stylesheets/head/generics/flip.sass
|
|
131
132
|
- app/assets/stylesheets/head/generics/fonts.sass
|
|
132
133
|
- app/assets/stylesheets/head/index.sass
|
|
133
134
|
- app/assets/stylesheets/head/objects/headicon.sass
|
|
134
135
|
- app/assets/stylesheets/head/package.json
|
|
135
|
-
- app/assets/stylesheets/head/settings/_colors.sass
|
|
136
136
|
- app/assets/stylesheets/head/settings/_headicons.scss
|
|
137
137
|
- app/assets/stylesheets/head/tools/_cloud.sass
|
|
138
138
|
- app/assets/stylesheets/head/tools/_link.sass
|
|
139
|
-
- app/assets/stylesheets/head/tools/
|
|
139
|
+
- app/assets/stylesheets/head/tools/_scheme.sass
|
|
140
140
|
- app/assets/stylesheets/head/tools/_terminal.sass
|
|
141
|
-
- app/assets/stylesheets/head/tools/_theme.sass
|
|
142
141
|
- app/assets/stylesheets/head/utilities/smokescreen.sass
|
|
143
142
|
- app/components/head/application_component.rb
|
|
144
143
|
- app/components/head/knob.rb
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
@use "sass:color"
|
|
2
|
-
|
|
3
|
-
$black: #222
|
|
4
|
-
$white: #fff
|
|
5
|
-
|
|
6
|
-
$paradise-pink: rgb(240, 30, 80)
|
|
7
|
-
$neon-yellow: #ffd400
|
|
8
|
-
$jade-green: rgb(0, 190, 130)
|
|
9
|
-
|
|
10
|
-
$granite-gray: rgb(70, 70, 70)
|
|
11
|
-
$steel-gray: color.adjust($granite-gray, $lightness: 25%)
|
|
12
|
-
$silver-gray: color.adjust($granite-gray, $lightness: 50%)
|
|
13
|
-
$moon-gray: color.adjust($granite-gray, $lightness: 65%)
|
|
14
|
-
|
|
15
|
-
$transparent-gray: rgba(100, 100, 100, 0.5)
|