@octaviaflow/themes 1.0.1

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 (46) hide show
  1. package/README.md +122 -0
  2. package/docs/sass.md +189 -0
  3. package/index.scss +11 -0
  4. package/lib/index.js +5634 -0
  5. package/package.json +49 -0
  6. package/scss/_component-tokens.scss +10 -0
  7. package/scss/_config.scss +11 -0
  8. package/scss/_theme.scss +120 -0
  9. package/scss/_themes.scss +8 -0
  10. package/scss/_tokens.scss +8 -0
  11. package/scss/_utilities.scss +18 -0
  12. package/scss/compat/_themes.scss +8 -0
  13. package/scss/compat/_tokens.scss +8 -0
  14. package/scss/compat/generated/_themes.scss +271 -0
  15. package/scss/compat/generated/_tokens.scss +206 -0
  16. package/src/component-tokens/button/index.js +10 -0
  17. package/src/component-tokens/button/tokens.js +132 -0
  18. package/src/component-tokens/notification/index.js +10 -0
  19. package/src/component-tokens/notification/tokens.js +107 -0
  20. package/src/component-tokens/tag/index.js +10 -0
  21. package/src/component-tokens/tag/tokens.js +362 -0
  22. package/src/g10.js +346 -0
  23. package/src/g100.js +349 -0
  24. package/src/g90.js +350 -0
  25. package/src/index.js +42 -0
  26. package/src/tokens/Token.js +37 -0
  27. package/src/tokens/TokenFormat.js +91 -0
  28. package/src/tokens/TokenGroup.js +164 -0
  29. package/src/tokens/TokenSet.js +80 -0
  30. package/src/tokens/components.js +97 -0
  31. package/src/tokens/index.js +71 -0
  32. package/src/tokens/layout.js +42 -0
  33. package/src/tokens/type.js +52 -0
  34. package/src/tokens/v10.js +191 -0
  35. package/src/tokens/v11TokenGroup.js +436 -0
  36. package/src/tokens/v11TokenSet.js +94 -0
  37. package/src/tools.js +80 -0
  38. package/src/v10/g10.js +352 -0
  39. package/src/v10/g100.js +351 -0
  40. package/src/v10/g90.js +353 -0
  41. package/src/v10/index.js +25 -0
  42. package/src/v10/metadata.yml +217 -0
  43. package/src/v10/tokens.js +400 -0
  44. package/src/v10/white.js +355 -0
  45. package/src/white.js +349 -0
  46. package/telemetry.yml +17 -0
package/README.md ADDED
@@ -0,0 +1,122 @@
1
+ # @octaviaflow/themes
2
+
3
+ > Themes for applying color in the Carbon Design System
4
+
5
+ ## Getting started
6
+
7
+ To install `@octaviaflow/themes` in your project, you will need to run the following
8
+ command using [npm](https://www.npmjs.com/):
9
+
10
+ ```bash
11
+ npm install -S @octaviaflow/themes
12
+ ```
13
+
14
+ If you prefer [Yarn](https://yarnpkg.com/en/), use the following command
15
+ instead:
16
+
17
+ ```bash
18
+ yarn add @octaviaflow/themes
19
+ ```
20
+
21
+ ## Usage
22
+
23
+ You can use `@octaviaflow/themes` in JavaScript or Sass by including this package in
24
+ your project. By default, `@octaviaflow/themes` provides a set of color tokens that
25
+ are pre-defined for a specific theme. Currently, we offer the following color
26
+ themes: white, gray 10, gray 90, gray 100 .
27
+
28
+ You can preview all of the token values for this on the
29
+ [Carbon Design System website](https://www.carbondesignsystem.com/guidelines/color/usage)
30
+ .
31
+
32
+ ### Sass
33
+
34
+ If your project is using Sass, you can include this package and the
35
+ corresponding default theme by writing the following in your Sass file:
36
+
37
+ ```scss
38
+ @use '@octaviaflow/themes/scss/themes';
39
+ ```
40
+
41
+ By default, the white theme will be initialized. If you would like to include
42
+ another theme, you can do so by setting the global theme variable in the import.
43
+ For example:
44
+
45
+ ```scss
46
+ @use '@octaviaflow/themes/scss/themes' as *;
47
+ @use '@octaviaflow/themes' with (
48
+ $theme: $g100
49
+ );
50
+ ```
51
+
52
+ Inline theming can be done by using the mixin. For example:
53
+
54
+ ```scss
55
+ @use '@octaviaflow/themes/scss/themes';
56
+ @use '@octaviaflow/themes/scss/theme';
57
+
58
+ // Uses the default white theme here
59
+
60
+ .my-dark-theme {
61
+ @include theme.theme(themes.$g90);
62
+ }
63
+
64
+ .my-darker-theme {
65
+ @include theme.theme(themes.$g100);
66
+ }
67
+ ```
68
+
69
+ ### JavaScript
70
+
71
+ If you're looking to use these themes in JavaScript, we export a variety of
72
+ bindings for you to use, including:
73
+
74
+ ```js
75
+ import {
76
+ // An object of all themes
77
+ themes,
78
+
79
+ // Direct theme values
80
+ white,
81
+ g10,
82
+ g90,
83
+ g100,
84
+
85
+ // Specific token values
86
+ interactive01,
87
+ interactive02,
88
+ } from '@octaviaflow/themes';
89
+ ```
90
+
91
+ ## 📖 API Documentation
92
+
93
+ If you're looking for `@octaviaflow/themes` API documentation, check out:
94
+
95
+ - [Sass](./docs/sass.md)
96
+
97
+ ## 📚 Examples
98
+
99
+ If you're looking for more examples on how to use `@octaviaflow/themes`, we have some
100
+ examples that you can check out:
101
+
102
+ - [preview](./examples/preview)
103
+ - [sass-modules](./examples/sass-modules)
104
+
105
+ ## 🙌 Contributing
106
+
107
+ We're always looking for contributors to help us fix bugs, build new features,
108
+ or help us improve the project documentation. If you're interested, definitely
109
+ check out our [Contributing Guide](/.github/CONTRIBUTING.md)! 👀
110
+
111
+ ## 📝 License
112
+
113
+ Licensed under the [Apache 2.0 License](/LICENSE).
114
+
115
+ ## <picture><source height="20" width="20" media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-dark.svg"><source height="20" width="20" media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-light.svg"><img height="20" width="20" alt="IBM Telemetry" src="https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-light.svg"></picture> IBM Telemetry
116
+
117
+ This package uses IBM Telemetry to collect de-identified and anonymized metrics
118
+ data. By installing this package as a dependency you are agreeing to telemetry
119
+ collection. To opt out, see
120
+ [Opting out of IBM Telemetry data collection](https://github.com/ibm-telemetry/telemetry-js/tree/main#opting-out-of-ibm-telemetry-data-collection).
121
+ For more information on the data being collected, please see the
122
+ [IBM Telemetry documentation](https://github.com/ibm-telemetry/telemetry-js/tree/main#ibm-telemetry-collection-basics).
package/docs/sass.md ADDED
@@ -0,0 +1,189 @@
1
+ # `@octaviaflow/themes`
2
+
3
+ > Sass documentation for `@octaviaflow/themes`
4
+
5
+ ## Usage
6
+
7
+ There are several entrypoints that you can use with `@octaviaflow/themes`, including:
8
+
9
+ | Filename | Description |
10
+ | ------------------------------------------- | ------------------------------------------------------ |
11
+ | `@use '@octaviaflow/themes';` | Package entrypoint |
12
+ | `@use '@octaviaflow/themes/scss/config';` | Specify config options for the package |
13
+ | `@use '@octaviaflow/themes/scss/themes';` | Theme definitions for white, g10, g90, and g100 |
14
+ | `@use '@octaviaflow/themes/scss/theme';` | Set the current theme, get token values from the theme |
15
+ | `@use '@octaviaflow/themes/scss/tokens';` | Access theme tokens |
16
+ | `@use '@octaviaflow/themes/scss/compat/themes';` | v10 Theme definitions for white, g10, g90, and g100 |
17
+ | `@use '@octaviaflow/themes/scss/compat/tokens';` | v10 theme tokens |
18
+
19
+ _Note: the white, g10, g90, and g100 themes are only available in the
20
+ `scss/themes` file and are not re-exported in `@octaviaflow/themes`. To learn more,
21
+ checkout our [FAQ](#why-are-the-themes-not-exported-in-carbonthemes)._
22
+
23
+ You can bring in `@octaviaflow/themes` by using `@use`:
24
+
25
+ ```scss
26
+ @use '@octaviaflow/themes';
27
+
28
+ .my-component {
29
+ // Use tokens from the theme, this will map to a CSS Custom Property
30
+ color: themes.$token-01;
31
+ }
32
+
33
+ :root {
34
+ // Emit CSS Custom Properties for the current theme
35
+ @include themes.theme();
36
+ }
37
+
38
+ // Get the value of a specific token
39
+ $custom-variable: rgba(themes.get('token-01'), 0.25);
40
+ ```
41
+
42
+ You can configure the current theme with the `$theme` option:
43
+
44
+ ```scss
45
+ @use '@octaviaflow/themes/scss/themes' as *;
46
+ @use '@octaviaflow/themes' with (
47
+ $theme: $g100
48
+ );
49
+ ```
50
+
51
+ You can also extend the theme with your own custom tokens:
52
+
53
+ ```scss
54
+ @use '@octaviaflow/themes/scss/themes';
55
+ @use '@octaviaflow/themes' with (
56
+ $fallback: themes.$g100,
57
+ $theme: (
58
+ token-01: #000000,
59
+ )
60
+ );
61
+ ```
62
+
63
+ ## API
64
+
65
+ | Import | Export | Description | !default |
66
+ | :--------------------------- | :--------------------------- | :------------------------------------------------------------------------------------ | :------- |
67
+ | `@octaviaflow/themes/scss/themes` | | | |
68
+ | | `$white` | | ✅ |
69
+ | | `$g10` | | ✅ |
70
+ | | `$g90` | | ✅ |
71
+ | | `$g100` | | ✅ |
72
+ | `@octaviaflow/themes` | | The default entrypoint which re-exports values from all other modules in this package | |
73
+ | | `$fallback` | | ✅ |
74
+ | | `$theme` | | ✅ |
75
+ | | `$background` | | ✅ |
76
+ | | `$background-active` | | ✅ |
77
+ | | `$background-selected` | | ✅ |
78
+ | | `$background-selected-hover` | | ✅ |
79
+ | | `$background-hover` | | ✅ |
80
+ | | `$background-brand` | | ✅ |
81
+ | | `$background-inverse` | | ✅ |
82
+ | | `$background-inverse-hover` | | ✅ |
83
+ | | `$layer-01` | | ✅ |
84
+ | | `$layer-active-01` | | ✅ |
85
+ | | `$layer-hover-01` | | ✅ |
86
+ | | `$layer-selected-01` | | ✅ |
87
+ | | `$layer-selected-hover-01` | | ✅ |
88
+ | | `$layer-02` | | ✅ |
89
+ | | `$layer-active-02` | | ✅ |
90
+ | | `$layer-hover-02` | | ✅ |
91
+ | | `$layer-selected-02` | | ✅ |
92
+ | | `$layer-selected-hover-02` | | ✅ |
93
+ | | `$layer-03` | | ✅ |
94
+ | | `$layer-active-03` | | ✅ |
95
+ | | `$layer-hover-03` | | ✅ |
96
+ | | `$layer-selected-03` | | ✅ |
97
+ | | `$layer-selected-hover-03` | | ✅ |
98
+ | | `$layer-selected-inverse` | | ✅ |
99
+ | | `$layer-selected-disabled` | | ✅ |
100
+ | | `$layer-accent-01` | | ✅ |
101
+ | | `$layer-accent-active-01` | | ✅ |
102
+ | | `$layer-accent-hover-01` | | ✅ |
103
+ | | `$layer-accent-02` | | ✅ |
104
+ | | `$layer-accent-active-02` | | ✅ |
105
+ | | `$layer-accent-hover-02` | | ✅ |
106
+ | | `$layer-accent-03` | | ✅ |
107
+ | | `$layer-accent-active-03` | | ✅ |
108
+ | | `$layer-accent-hover-03` | | ✅ |
109
+ | | `$field-01` | | ✅ |
110
+ | | `$field-hover-01` | | ✅ |
111
+ | | `$field-02` | | ✅ |
112
+ | | `$field-hover-02` | | ✅ |
113
+ | | `$field-03` | | ✅ |
114
+ | | `$field-hover-03` | | ✅ |
115
+ | | `$interactive` | | ✅ |
116
+ | | `$border-subtle-00` | | ✅ |
117
+ | | `$border-subtle-01` | | ✅ |
118
+ | | `$border-subtle-selected-01` | | ✅ |
119
+ | | `$border-subtle-02` | | ✅ |
120
+ | | `$border-subtle-selected-02` | | ✅ |
121
+ | | `$border-subtle-03` | | ✅ |
122
+ | | `$border-subtle-selected-03` | | ✅ |
123
+ | | `$border-strong-01` | | ✅ |
124
+ | | `$border-strong-02` | | ✅ |
125
+ | | `$border-strong-03` | | ✅ |
126
+ | | `$border-inverse` | | ✅ |
127
+ | | `$border-interactive` | | ✅ |
128
+ | | `$border-disabled` | | ✅ |
129
+ | | `$text-primary` | | ✅ |
130
+ | | `$text-secondary` | | ✅ |
131
+ | | `$text-placeholder` | | ✅ |
132
+ | | `$text-helper` | | ✅ |
133
+ | | `$text-error` | | ✅ |
134
+ | | `$text-inverse` | | ✅ |
135
+ | | `$text-on-color` | | ✅ |
136
+ | | `$text-on-color-disabled` | | ✅ |
137
+ | | `$text-disabled` | | ✅ |
138
+ | | `$link-primary` | | ✅ |
139
+ | | `$link-primary-hover` | | ✅ |
140
+ | | `$link-secondary` | | ✅ |
141
+ | | `$link-inverse` | | ✅ |
142
+ | | `$link-visited` | | ✅ |
143
+ | | `$icon-primary` | | ✅ |
144
+ | | `$icon-secondary` | | ✅ |
145
+ | | `$icon-inverse` | | ✅ |
146
+ | | `$icon-on-color` | | ✅ |
147
+ | | `$icon-on-color-disabled` | | ✅ |
148
+ | | `$icon-disabled` | | ✅ |
149
+ | | `$support-error` | | ✅ |
150
+ | | `$support-success` | | ✅ |
151
+ | | `$support-warning` | | ✅ |
152
+ | | `$support-info` | | ✅ |
153
+ | | `$support-error-inverse` | | ✅ |
154
+ | | `$support-success-inverse` | | ✅ |
155
+ | | `$support-warning-inverse` | | ✅ |
156
+ | | `$support-info-inverse` | | ✅ |
157
+ | | `$support-caution-major` | | ✅ |
158
+ | | `$support-caution-minor` | | ✅ |
159
+ | | `$support-caution-undefined` | | ✅ |
160
+ | | `$highlight` | | ✅ |
161
+ | | `$overlay` | | ✅ |
162
+ | | `$toggle-off` | | ✅ |
163
+ | | `$shadow` | | ✅ |
164
+ | | `$focus` | | ✅ |
165
+ | | `$focus-inset` | | ✅ |
166
+ | | `$focus-inverse` | | ✅ |
167
+ | | `$skeleton-background` | | ✅ |
168
+ | | `$skeleton-element` | | ✅ |
169
+
170
+ ### Configuration
171
+
172
+ ## FAQ
173
+
174
+ ### Why are the themes not exported in `@octaviaflow/themes`?
175
+
176
+ In order to support `@use '@octaviaflow/themes' with` in Sass Modules, unfortunately
177
+ we cannot re-export the themes available in `scss/modules/themes`. If we
178
+ implemented the entrypoint at `@octaviaflow/themes` to re-export that module, then
179
+ Sass would not compile when doing the following:
180
+
181
+ ```scss
182
+ @use '@octaviaflow/themes/scss/modules/themes';
183
+ @use '@octaviaflow/themes' with (
184
+ $theme: themes.$g100
185
+ );
186
+ ```
187
+
188
+ This is because the `scss/modules/themes` file will have been initialized twice
189
+ which is not allowed in the Sass Module system.
package/index.scss ADDED
@@ -0,0 +1,11 @@
1
+ //
2
+ // Copyright OctaviaFlow. 2025
3
+ //
4
+ // This source code is licensed under the Apache-2.0 license found in the
5
+ // LICENSE file in the root directory of this source tree.
6
+ //
7
+
8
+ @forward 'scss/config';
9
+ @forward 'scss/theme';
10
+ @forward 'scss/tokens';
11
+ @forward 'scss/component-tokens';