@adrienlcp/styles 0.1.0 → 0.2.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.
Files changed (3) hide show
  1. package/README.md +1 -25
  2. package/package.json +54 -58
  3. package/src/_focus.sass +0 -32
package/README.md CHANGED
@@ -30,7 +30,7 @@ stylesheet loads, so the reset stays under every component rule —
30
30
  ## Sass
31
31
 
32
32
  Resolved through the `sass` export condition, which Vite reads; with the Sass
33
- CLI, use `pkg:@adrienlcp/styles/focus` and `--pkg-importer=node`.
33
+ CLI, use `pkg:@adrienlcp/styles/breakpoints` and `--pkg-importer=node`.
34
34
 
35
35
  ### `breakpoints`
36
36
 
@@ -46,30 +46,6 @@ CLI, use `pkg:@adrienlcp/styles/focus` and `--pkg-importer=node`.
46
46
  exact complement. Another value: `@use '@adrienlcp/styles/breakpoints' with
47
47
  ($wide-screen: 1024px)`.
48
48
 
49
- ### `focus`
50
-
51
- `ring` and `ring-inset` draw the outline on `[data-focus-visible]` (react-aria)
52
- and `:focus-visible` (a native element). `hovered` wraps a hover style in
53
- `(hover: hover) and (pointer: fine)`, since a touch screen replays hover after a
54
- tap and leaves it stuck; `$except` skips a state.
55
-
56
- ```sass
57
- @use '@adrienlcp/styles/focus'
58
-
59
- .button
60
- @include focus.ring
61
-
62
- @include focus.hovered($except: '[data-disabled]')
63
- background: var(--hover)
64
- ```
65
-
66
- Configure the ring once, in the app's own `_focus.sass`, and have components
67
- `@use` that file:
68
-
69
- ```sass
70
- @forward '@adrienlcp/styles/focus' with ($ring-color: var(--focus), $ring-offset: 3px, $ring-width: 3px)
71
- ```
72
-
73
49
  ### `fonts`
74
50
 
75
51
  `$latin` and `$latin-ext` are the unicode ranges Google Fonts cuts a Latin face
package/package.json CHANGED
@@ -1,58 +1,54 @@
1
- {
2
- "author": "Adrien Lacourpaille",
3
- "bugs": "https://github.com/AdrienLcp/packages/issues",
4
- "description": "A reset, a reduced-motion switch, and Sass mixins for self-hosted fonts, a breakpoint, focus rings and pointer-only hover",
5
- "devDependencies": {
6
- "sass": "^1.105.0"
7
- },
8
- "exports": {
9
- "./breakpoints": {
10
- "sass": "./src/_breakpoints.sass"
11
- },
12
- "./focus": {
13
- "sass": "./src/_focus.sass"
14
- },
15
- "./fonts": {
16
- "sass": "./src/_fonts.sass"
17
- },
18
- "./package.json": "./package.json",
19
- "./reduced-motion.css": "./src/reduced-motion.css",
20
- "./reset.css": "./src/reset.css"
21
- },
22
- "files": [
23
- "src/*.css",
24
- "src/*.sass"
25
- ],
26
- "homepage": "https://github.com/AdrienLcp/packages/tree/main/packages/styles#readme",
27
- "keywords": [
28
- "css",
29
- "focus-visible",
30
- "font-face",
31
- "reset",
32
- "sass"
33
- ],
34
- "license": "MIT",
35
- "name": "@adrienlcp/styles",
36
- "peerDependencies": {
37
- "sass": ">=1.80.0"
38
- },
39
- "peerDependenciesMeta": {
40
- "sass": {
41
- "optional": true
42
- }
43
- },
44
- "repository": {
45
- "directory": "packages/styles",
46
- "type": "git",
47
- "url": "git+https://github.com/AdrienLcp/packages.git"
48
- },
49
- "scripts": {
50
- "test": "vitest run",
51
- "test:watch": "vitest --watch"
52
- },
53
- "sideEffects": [
54
- "*.css"
55
- ],
56
- "type": "module",
57
- "version": "0.1.0"
58
- }
1
+ {
2
+ "author": "Adrien Lacourpaille",
3
+ "bugs": "https://github.com/AdrienLcp/packages/issues",
4
+ "description": "A reset, a reduced-motion switch, and Sass mixins for self-hosted fonts and a breakpoint",
5
+ "devDependencies": {
6
+ "sass": "^1.105.0"
7
+ },
8
+ "exports": {
9
+ "./breakpoints": {
10
+ "sass": "./src/_breakpoints.sass"
11
+ },
12
+ "./fonts": {
13
+ "sass": "./src/_fonts.sass"
14
+ },
15
+ "./package.json": "./package.json",
16
+ "./reduced-motion.css": "./src/reduced-motion.css",
17
+ "./reset.css": "./src/reset.css"
18
+ },
19
+ "files": [
20
+ "src/*.css",
21
+ "src/*.sass"
22
+ ],
23
+ "homepage": "https://github.com/AdrienLcp/packages/tree/main/packages/styles#readme",
24
+ "keywords": [
25
+ "css",
26
+ "font-face",
27
+ "reset",
28
+ "sass"
29
+ ],
30
+ "license": "MIT",
31
+ "name": "@adrienlcp/styles",
32
+ "peerDependencies": {
33
+ "sass": ">=1.80.0"
34
+ },
35
+ "peerDependenciesMeta": {
36
+ "sass": {
37
+ "optional": true
38
+ }
39
+ },
40
+ "repository": {
41
+ "directory": "packages/styles",
42
+ "type": "git",
43
+ "url": "git+https://github.com/AdrienLcp/packages.git"
44
+ },
45
+ "sideEffects": [
46
+ "*.css"
47
+ ],
48
+ "type": "module",
49
+ "version": "0.2.0",
50
+ "scripts": {
51
+ "test": "vitest run",
52
+ "test:watch": "vitest --watch"
53
+ }
54
+ }
package/src/_focus.sass DELETED
@@ -1,32 +0,0 @@
1
- /// Configure once, in the app's own `_focus.sass`:
2
- /// `@forward '@adrienlcp/styles/focus' with ($ring-color: var(--focus) !default)`.
3
- $ring-width: 2px !default
4
- $ring-color: currentColor !default
5
- $ring-offset: 3px !default
6
-
7
- /// react-aria stamps `data-focus-visible` on keyboard focus only; the
8
- /// `:focus-visible` twin covers a native element.
9
- @mixin ring
10
- &[data-focus-visible],
11
- &:focus-visible
12
- outline: $ring-width solid $ring-color
13
- outline-offset: $ring-offset
14
-
15
- /// The ring drawn inside the box, for an element a clipping ancestor would cut.
16
- @mixin ring-inset
17
- &[data-focus-visible],
18
- &:focus-visible
19
- outline: $ring-width solid $ring-color
20
- outline-offset: calc(-1 * $ring-width)
21
-
22
- /// Only a real pointer hovers: a touch screen replays hover after a tap and
23
- /// leaves it stuck until the next one. `$except` skips a state, as in
24
- /// `hovered($except: '[data-disabled]')`.
25
- @mixin hovered($except: null)
26
- @media (hover: hover) and (pointer: fine)
27
- @if $except
28
- &[data-hovered]:not(#{$except})
29
- @content
30
- @else
31
- &[data-hovered]
32
- @content