@openwebconcept/theme-owc 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.
Files changed (11) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/LICENSE.md +7 -0
  3. package/README.md +63 -0
  4. package/dist/_variables.scss +178 -0
  5. package/dist/index.css +2 -0
  6. package/dist/index.js +189 -0
  7. package/dist/theme.css +181 -0
  8. package/dist/tokens.json +291 -0
  9. package/package.json +39 -0
  10. package/src/index.scss +2 -0
  11. package/style-dictionary.config.json +57 -0
package/CHANGELOG.md ADDED
@@ -0,0 +1,13 @@
1
+ # @openwebconcept/theme-owc
2
+
3
+ ## 1.0.0
4
+
5
+ ### Patch Changes
6
+
7
+ - 974b14d: Split `@openwebconcept/design-tokens` responsibilities.
8
+ - `@openwebconcept/design-tokens` no longer emits `dist/theme.css` scoped to `.theme-owc`. It now exposes only the root-scoped neutral primitives in `dist/tokens.css` (plus SCSS, JS, and JSON outputs).
9
+ - New `@openwebconcept/theme-owc` package emits the `.theme-owc`-scoped CSS as `dist/index.css`, mirroring the shape of the municipal theme packages.
10
+ - Consumers previously importing `@openwebconcept/design-tokens/dist/theme.css` should switch to `@openwebconcept/theme-owc/dist/index.css`.
11
+
12
+ - Updated dependencies [974b14d]
13
+ - @openwebconcept/design-tokens@1.0.0
package/LICENSE.md ADDED
@@ -0,0 +1,7 @@
1
+ # License
2
+
3
+ Copyright (c) 2026 Community for NL Design System
4
+
5
+ All rights reserved.
6
+
7
+ This design system theme is proprietary to the Open Webconcept community.
package/README.md ADDED
@@ -0,0 +1,63 @@
1
+ # OpenWebconcept Theme
2
+
3
+ The default OpenWebconcept theme. Re-emits the shared token defaults from `@openwebconcept/design-tokens` scoped to the `.theme-owc` CSS selector.
4
+
5
+ ## Status: starter theme, not production
6
+
7
+ This package is intended as a **starting point**, not a finished product.
8
+
9
+ - It ships the unopinionated defaults from `@openwebconcept/design-tokens` (`system-ui` typography, a generic blue primary, placeholder component tokens) without any OpenWebconcept brand identity, accessible color contrast review, typography scale tuning, or real-world QA.
10
+ - It exists so storybook has a default theme to render and so new municipal themes have a working template to clone.
11
+ - For production use, either fork this package into your own municipal theme (see `theme-barendrecht`, `theme-gouda`, etc. for examples of how to override `owc.color.*`, `owc.typography.*`, and component tokens), or use it only after substituting your own brand tokens.
12
+
13
+ If you are looking for a production theme with a vetted design, pick one of the municipal themes (for example `@openwebconcept/theme-barendrecht`) or build your own.
14
+
15
+ ## Installation
16
+
17
+ ```bash
18
+ pnpm add @openwebconcept/theme-owc
19
+ ```
20
+
21
+ ## Usage
22
+
23
+ ### CSS
24
+
25
+ ```css
26
+ @import '@openwebconcept/theme-owc/dist/index.css';
27
+ ```
28
+
29
+ Then apply the theme by adding the `theme-owc` class to a root element (e.g. `<html>` or `<body>`):
30
+
31
+ ```html
32
+ <html class="theme-owc">
33
+ ...
34
+ </html>
35
+ ```
36
+
37
+ ### SCSS
38
+
39
+ ```scss
40
+ @import '@openwebconcept/theme-owc/dist/variables';
41
+ ```
42
+
43
+ ### JavaScript
44
+
45
+ ```js
46
+ import tokens from '@openwebconcept/theme-owc';
47
+ ```
48
+
49
+ ## Building
50
+
51
+ ```bash
52
+ pnpm run build
53
+ ```
54
+
55
+ ## Development
56
+
57
+ ```bash
58
+ pnpm run watch
59
+ ```
60
+
61
+ ## License
62
+
63
+ See LICENSE.md for license information.
package/dist/_variables.scss ADDED
@@ -0,0 +1,178 @@
1
+
2
+ // Do not edit directly, this file was auto-generated.
3
+
4
+ $owc-color-primary: #1d70b8;
5
+ $owc-color-secondary: #4d4d4d;
6
+ $owc-color-success: #28a745;
7
+ $owc-color-warning: #ffc107;
8
+ $owc-color-danger: #dc3545;
9
+ $owc-typography-font-family-sans: system-ui, sans-serif;
10
+ $owc-typography-font-size-sm: clamp(0.8255rem, 0.7822rem + 0.1845vw, 0.9091rem);
11
+ $owc-typography-font-size-base: clamp(0.875rem, 0.8103rem + 0.2759vw, 1rem);
12
+ $owc-typography-font-size-xl: clamp(0.9275rem, 0.8383rem + 0.3807vw, 1.1rem);
13
+ $owc-typography-line-height-base: 1.75;
14
+ $owc-button-border-width: 1px;
15
+ $owc-button-border-radius: 4px;
16
+ $owc-button-padding-block: .7rem;
17
+ $owc-button-padding-inline: 1.2rem;
18
+ $owc-button-font-size: 16px;
19
+ $owc-button-font-weight: 600;
20
+ $owc-focus-outline-width: 2px;
21
+ $owc-focus-outline-style: solid;
22
+ $owc-focus-outline-offset: 2px;
23
+ $nl-button-default-background-color: transparent;
24
+ $nl-button-default-hover-color: #ffffff;
25
+ $nl-button-default-active-color: #ffffff;
26
+ $nl-button-default-disabled-background-color: transparent;
27
+ $nl-button-default-disabled-border-color: #ced4da;
28
+ $nl-button-default-disabled-color: #6c757d;
29
+ $nl-button-default-focus-color: #ffffff;
30
+ $nl-button-primary-color: #ffffff;
31
+ $nl-button-primary-hover-color: #ffffff;
32
+ $nl-button-primary-active-color: #ffffff;
33
+ $nl-button-primary-disabled-background-color: #ced4da;
34
+ $nl-button-primary-disabled-border-color: #ced4da;
35
+ $nl-button-primary-disabled-color: #6c757d;
36
+ $nl-button-secondary-background-color: transparent;
37
+ $nl-button-secondary-hover-color: #ffffff;
38
+ $nl-button-secondary-active-color: #ffffff;
39
+ $nl-button-secondary-disabled-background-color: transparent;
40
+ $nl-button-secondary-disabled-border-color: #ced4da;
41
+ $nl-button-secondary-disabled-color: #6c757d;
42
+ $nl-button-subtle-background-color: transparent;
43
+ $nl-button-subtle-border-color: transparent;
44
+ $nl-button-subtle-hover-background-color: transparent;
45
+ $nl-button-subtle-hover-border-color: transparent;
46
+ $nl-button-subtle-active-background-color: transparent;
47
+ $nl-button-subtle-active-border-color: transparent;
48
+ $nl-button-subtle-disabled-background-color: transparent;
49
+ $nl-button-subtle-disabled-border-color: transparent;
50
+ $nl-button-subtle-disabled-color: #6c757d;
51
+ $nl-button-focus-color: #ffffff;
52
+ $denhaag-process-steps-line-height: 24px;
53
+ $denhaag-process-steps-step-padding-block-start: 0;
54
+ $denhaag-process-steps-step-padding-block-end: 0;
55
+ $denhaag-process-steps-step-distance: 40px;
56
+ $denhaag-process-steps-sub-step-distance: 12px;
57
+ $denhaag-process-steps-step-content-margin: 12px;
58
+ $denhaag-process-steps-step-header-align-items: center;
59
+ $denhaag-process-steps-step-collapse-icon-size: 16px;
60
+ $denhaag-process-steps-step-collapse-icon-padding: 4px;
61
+ $denhaag-process-steps-step-heading-color: #000000;
62
+ $denhaag-process-steps-step-heading-font-weight: 400;
63
+ $denhaag-process-steps-step-heading-overflow-wrap: anywhere;
64
+ $denhaag-process-steps-step-heading-not-checked-color: #000000;
65
+ $denhaag-process-steps-step-heading-checked-color: #000000;
66
+ $denhaag-process-steps-step-heading-checked-font-weight: 700;
67
+ $denhaag-process-steps-step-heading-current-font-weight: 700;
68
+ $denhaag-process-steps-step-heading-warning-color: #f97316;
69
+ $denhaag-process-steps-step-meta-color: #000000;
70
+ $denhaag-process-steps-step-meta-font-size: 16px;
71
+ $denhaag-process-steps-step-meta-date-color: #000000;
72
+ $denhaag-process-steps-step-meta-nested-font-size: 14px;
73
+ $denhaag-process-steps-step-meta-nested-margin-block-start: 4px;
74
+ $denhaag-process-steps-step-content-color: #ced4da;
75
+ $denhaag-step-marker-size: 32px;
76
+ $denhaag-step-marker-border-width: 2px;
77
+ $denhaag-step-marker-font-weight: 400;
78
+ $denhaag-step-marker-margin: 0;
79
+ $denhaag-step-marker-padding: 12px;
80
+ $denhaag-step-marker-icon-size: 20px;
81
+ $denhaag-step-marker-nested-size: 16px;
82
+ $denhaag-step-marker-nested-icon-size: 10px;
83
+ $denhaag-step-marker-default-background-color: #ced4da;
84
+ $denhaag-step-marker-default-border-color: #ced4da;
85
+ $denhaag-step-marker-default-color: #ffffff;
86
+ $denhaag-step-marker-default-nested-color: #ced4da;
87
+ $denhaag-step-marker-checked-background-color: #ffffff;
88
+ $denhaag-step-marker-current-color: #ffffff;
89
+ $denhaag-step-marker-not-checked-background-color: #ffffff;
90
+ $denhaag-step-marker-not-checked-border-color: #ced4da;
91
+ $denhaag-step-marker-not-checked-color: #000000;
92
+ $denhaag-step-marker-disabled-background-color: #ced4da;
93
+ $denhaag-step-marker-disabled-border-color: #ced4da;
94
+ $denhaag-step-marker-disabled-color: #343a40;
95
+ $denhaag-step-marker-warning-background-color: #f97316;
96
+ $denhaag-step-marker-warning-border-color: #f97316;
97
+ $denhaag-step-marker-warning-color: #ffffff;
98
+ $denhaag-step-marker-warning-nested-background-color: #ffffff;
99
+ $denhaag-step-marker-warning-nested-border-color: #f97316;
100
+ $denhaag-step-marker-error-color: #ffffff;
101
+ $denhaag-step-marker-connector-outline-width: 1px;
102
+ $denhaag-step-marker-connector-default-outline-color: #ced4da;
103
+ $denhaag-step-marker-connector-not-checked-outline-color: #ced4da;
104
+ $denhaag-step-marker-connector-warning-outline-color: #fb923c;
105
+ $utrecht-button-subtle-background-color: transparent;
106
+ $utrecht-button-subtle-color: auto;
107
+ $utrecht-button-padding-block-start: 0;
108
+ $utrecht-button-padding-block-end: 0;
109
+ $utrecht-button-padding-inline-start: 0;
110
+ $utrecht-button-padding-inline-end: 0;
111
+ $utrecht-button-icon-gap: 4px;
112
+ $nl-button-border-radius: $owc-button-border-radius;
113
+ $nl-button-font-family: $owc-typography-font-family-sans;
114
+ $nl-button-padding-block-start: $owc-button-padding-block;
115
+ $nl-button-padding-block-end: $owc-button-padding-block;
116
+ $nl-button-padding-inline-start: $owc-button-padding-inline;
117
+ $nl-button-padding-inline-end: $owc-button-padding-inline;
118
+ $nl-button-default-border-color: $owc-color-primary;
119
+ $nl-button-default-border-width: $owc-button-border-width;
120
+ $nl-button-default-color: $owc-color-primary;
121
+ $nl-button-default-font-size: $owc-button-font-size;
122
+ $nl-button-default-font-weight: $owc-button-font-weight;
123
+ $nl-button-default-hover-background-color: $owc-color-primary;
124
+ $nl-button-default-hover-border-color: $owc-color-primary;
125
+ $nl-button-default-active-background-color: $owc-color-primary;
126
+ $nl-button-default-active-border-color: $owc-color-primary;
127
+ $nl-button-default-focus-background-color: $owc-color-primary;
128
+ $nl-button-default-focus-border-color: $owc-color-primary;
129
+ $nl-button-primary-background-color: $owc-color-primary;
130
+ $nl-button-primary-border-color: $owc-color-primary;
131
+ $nl-button-primary-border-width: $owc-button-border-width;
132
+ $nl-button-primary-font-size: $owc-button-font-size;
133
+ $nl-button-primary-font-weight: $owc-button-font-weight;
134
+ $nl-button-primary-hover-background-color: $owc-color-primary;
135
+ $nl-button-primary-hover-border-color: $owc-color-primary;
136
+ $nl-button-primary-active-background-color: $owc-color-primary;
137
+ $nl-button-primary-active-border-color: $owc-color-primary;
138
+ $nl-button-secondary-border-color: $owc-color-primary;
139
+ $nl-button-secondary-border-width: $owc-button-border-width;
140
+ $nl-button-secondary-color: $owc-color-primary;
141
+ $nl-button-secondary-font-size: $owc-button-font-size;
142
+ $nl-button-secondary-font-weight: $owc-button-font-weight;
143
+ $nl-button-secondary-hover-background-color: $owc-color-primary;
144
+ $nl-button-secondary-hover-border-color: $owc-color-primary;
145
+ $nl-button-secondary-active-background-color: $owc-color-primary;
146
+ $nl-button-secondary-active-border-color: $owc-color-primary;
147
+ $nl-button-subtle-border-width: $owc-button-border-width;
148
+ $nl-button-subtle-color: $owc-color-primary;
149
+ $nl-button-subtle-font-size: $owc-button-font-size;
150
+ $nl-button-subtle-font-weight: $owc-button-font-weight;
151
+ $nl-button-subtle-hover-color: $owc-color-primary;
152
+ $nl-button-subtle-active-color: $owc-color-primary;
153
+ $nl-button-focus-background-color: $owc-color-primary;
154
+ $nl-button-focus-border-color: $owc-color-primary;
155
+ $denhaag-process-steps-font-family: $owc-typography-font-family-sans;
156
+ $denhaag-process-steps-font-size: $owc-typography-font-size-base;
157
+ $denhaag-process-steps-step-heading-font-family: $owc-typography-font-family-sans;
158
+ $denhaag-process-steps-step-heading-font-size: $owc-typography-font-size-xl;
159
+ $denhaag-process-steps-step-heading-line-height: $owc-typography-line-height-base;
160
+ $denhaag-process-steps-step-heading-checked-font-size: $owc-typography-font-size-xl;
161
+ $denhaag-process-steps-step-heading-checked-line-height: $owc-typography-line-height-base;
162
+ $denhaag-process-steps-step-heading-current-color: $owc-color-primary;
163
+ $denhaag-process-steps-step-heading-current-font-size: $owc-typography-font-size-xl;
164
+ $denhaag-process-steps-step-heading-current-line-height: $owc-typography-line-height-base;
165
+ $denhaag-process-steps-step-heading-error-color: $owc-color-danger;
166
+ $denhaag-process-steps-step-meta-date-font-size: $owc-typography-font-size-sm;
167
+ $denhaag-step-marker-font-family: $owc-typography-font-family-sans;
168
+ $denhaag-step-marker-font-size: $owc-typography-font-size-sm;
169
+ $denhaag-step-marker-checked-border-color: $owc-color-primary;
170
+ $denhaag-step-marker-checked-color: $owc-color-primary;
171
+ $denhaag-step-marker-current-background-color: $owc-color-primary;
172
+ $denhaag-step-marker-current-border-color: $owc-color-primary;
173
+ $denhaag-step-marker-current-nested-color: $owc-color-primary;
174
+ $denhaag-step-marker-error-background-color: $owc-color-danger;
175
+ $denhaag-step-marker-error-border-color: $owc-color-danger;
176
+ $denhaag-step-marker-connector-checked-outline-color: $owc-color-primary;
177
+ $denhaag-step-marker-connector-error-outline-color: $owc-color-danger;
178
+ $utrecht-button-subtle-font-size: $owc-typography-font-size-base;
package/dist/index.css ADDED
@@ -0,0 +1,2 @@
1
+ /* OpenWebconcept Theme */
2
+ @import './theme.css';
package/dist/index.js ADDED
@@ -0,0 +1,189 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ export const owcColorPrimary = "#1d70b8";
6
+ export const owcColorSecondary = "#4d4d4d";
7
+ export const owcColorSuccess = "#28a745";
8
+ export const owcColorWarning = "#ffc107";
9
+ export const owcColorDanger = "#dc3545";
10
+ export const owcTypographyFontFamilySans = "system-ui, sans-serif";
11
+ export const owcTypographyFontSizeSm =
12
+ "clamp(0.8255rem, 0.7822rem + 0.1845vw, 0.9091rem)";
13
+ export const owcTypographyFontSizeBase =
14
+ "clamp(0.875rem, 0.8103rem + 0.2759vw, 1rem)";
15
+ export const owcTypographyFontSizeXl =
16
+ "clamp(0.9275rem, 0.8383rem + 0.3807vw, 1.1rem)";
17
+ export const owcTypographyLineHeightBase = "1.75";
18
+ export const owcButtonBorderWidth = "1px";
19
+ export const owcButtonBorderRadius = "4px";
20
+ export const owcButtonPaddingBlock = ".7rem";
21
+ export const owcButtonPaddingInline = "1.2rem";
22
+ export const owcButtonFontSize = "16px";
23
+ export const owcButtonFontWeight = "600";
24
+ export const owcFocusOutlineWidth = "2px";
25
+ export const owcFocusOutlineStyle = "solid";
26
+ export const owcFocusOutlineOffset = "2px";
27
+ export const nlButtonBorderRadius = "4px";
28
+ export const nlButtonFontFamily = "system-ui, sans-serif";
29
+ export const nlButtonPaddingBlockStart = ".7rem";
30
+ export const nlButtonPaddingBlockEnd = ".7rem";
31
+ export const nlButtonPaddingInlineStart = "1.2rem";
32
+ export const nlButtonPaddingInlineEnd = "1.2rem";
33
+ export const nlButtonDefaultBackgroundColor = "transparent";
34
+ export const nlButtonDefaultBorderColor = "#1d70b8";
35
+ export const nlButtonDefaultBorderWidth = "1px";
36
+ export const nlButtonDefaultColor = "#1d70b8";
37
+ export const nlButtonDefaultFontSize = "16px";
38
+ export const nlButtonDefaultFontWeight = "600";
39
+ export const nlButtonDefaultHoverBackgroundColor = "#1d70b8";
40
+ export const nlButtonDefaultHoverBorderColor = "#1d70b8";
41
+ export const nlButtonDefaultHoverColor = "#ffffff";
42
+ export const nlButtonDefaultActiveBackgroundColor = "#1d70b8";
43
+ export const nlButtonDefaultActiveBorderColor = "#1d70b8";
44
+ export const nlButtonDefaultActiveColor = "#ffffff";
45
+ export const nlButtonDefaultDisabledBackgroundColor = "transparent";
46
+ export const nlButtonDefaultDisabledBorderColor = "#ced4da";
47
+ export const nlButtonDefaultDisabledColor = "#6c757d";
48
+ export const nlButtonDefaultFocusBackgroundColor = "#1d70b8";
49
+ export const nlButtonDefaultFocusBorderColor = "#1d70b8";
50
+ export const nlButtonDefaultFocusColor = "#ffffff";
51
+ export const nlButtonPrimaryBackgroundColor = "#1d70b8";
52
+ export const nlButtonPrimaryBorderColor = "#1d70b8";
53
+ export const nlButtonPrimaryBorderWidth = "1px";
54
+ export const nlButtonPrimaryColor = "#ffffff";
55
+ export const nlButtonPrimaryFontSize = "16px";
56
+ export const nlButtonPrimaryFontWeight = "600";
57
+ export const nlButtonPrimaryHoverBackgroundColor = "#1d70b8";
58
+ export const nlButtonPrimaryHoverBorderColor = "#1d70b8";
59
+ export const nlButtonPrimaryHoverColor = "#ffffff";
60
+ export const nlButtonPrimaryActiveBackgroundColor = "#1d70b8";
61
+ export const nlButtonPrimaryActiveBorderColor = "#1d70b8";
62
+ export const nlButtonPrimaryActiveColor = "#ffffff";
63
+ export const nlButtonPrimaryDisabledBackgroundColor = "#ced4da";
64
+ export const nlButtonPrimaryDisabledBorderColor = "#ced4da";
65
+ export const nlButtonPrimaryDisabledColor = "#6c757d";
66
+ export const nlButtonSecondaryBackgroundColor = "transparent";
67
+ export const nlButtonSecondaryBorderColor = "#1d70b8";
68
+ export const nlButtonSecondaryBorderWidth = "1px";
69
+ export const nlButtonSecondaryColor = "#1d70b8";
70
+ export const nlButtonSecondaryFontSize = "16px";
71
+ export const nlButtonSecondaryFontWeight = "600";
72
+ export const nlButtonSecondaryHoverBackgroundColor = "#1d70b8";
73
+ export const nlButtonSecondaryHoverBorderColor = "#1d70b8";
74
+ export const nlButtonSecondaryHoverColor = "#ffffff";
75
+ export const nlButtonSecondaryActiveBackgroundColor = "#1d70b8";
76
+ export const nlButtonSecondaryActiveBorderColor = "#1d70b8";
77
+ export const nlButtonSecondaryActiveColor = "#ffffff";
78
+ export const nlButtonSecondaryDisabledBackgroundColor = "transparent";
79
+ export const nlButtonSecondaryDisabledBorderColor = "#ced4da";
80
+ export const nlButtonSecondaryDisabledColor = "#6c757d";
81
+ export const nlButtonSubtleBackgroundColor = "transparent";
82
+ export const nlButtonSubtleBorderColor = "transparent";
83
+ export const nlButtonSubtleBorderWidth = "1px";
84
+ export const nlButtonSubtleColor = "#1d70b8";
85
+ export const nlButtonSubtleFontSize = "16px";
86
+ export const nlButtonSubtleFontWeight = "600";
87
+ export const nlButtonSubtleHoverBackgroundColor = "transparent";
88
+ export const nlButtonSubtleHoverBorderColor = "transparent";
89
+ export const nlButtonSubtleHoverColor = "#1d70b8";
90
+ export const nlButtonSubtleActiveBackgroundColor = "transparent";
91
+ export const nlButtonSubtleActiveBorderColor = "transparent";
92
+ export const nlButtonSubtleActiveColor = "#1d70b8";
93
+ export const nlButtonSubtleDisabledBackgroundColor = "transparent";
94
+ export const nlButtonSubtleDisabledBorderColor = "transparent";
95
+ export const nlButtonSubtleDisabledColor = "#6c757d";
96
+ export const nlButtonFocusBackgroundColor = "#1d70b8";
97
+ export const nlButtonFocusBorderColor = "#1d70b8";
98
+ export const nlButtonFocusColor = "#ffffff";
99
+ export const denhaagProcessStepsFontFamily = "system-ui, sans-serif";
100
+ export const denhaagProcessStepsFontSize =
101
+ "clamp(0.875rem, 0.8103rem + 0.2759vw, 1rem)";
102
+ export const denhaagProcessStepsLineHeight = "24px";
103
+ export const denhaagProcessStepsStepPaddingBlockStart = "0";
104
+ export const denhaagProcessStepsStepPaddingBlockEnd = "0";
105
+ export const denhaagProcessStepsStepDistance = "40px";
106
+ export const denhaagProcessStepsSubStepDistance = "12px";
107
+ export const denhaagProcessStepsStepContentMargin = "12px";
108
+ export const denhaagProcessStepsStepHeaderAlignItems = "center";
109
+ export const denhaagProcessStepsStepCollapseIconSize = "16px";
110
+ export const denhaagProcessStepsStepCollapseIconPadding = "4px";
111
+ export const denhaagProcessStepsStepHeadingColor = "#000000";
112
+ export const denhaagProcessStepsStepHeadingFontFamily = "system-ui, sans-serif";
113
+ export const denhaagProcessStepsStepHeadingFontSize =
114
+ "clamp(0.9275rem, 0.8383rem + 0.3807vw, 1.1rem)";
115
+ export const denhaagProcessStepsStepHeadingFontWeight = "400";
116
+ export const denhaagProcessStepsStepHeadingLineHeight = "1.75";
117
+ export const denhaagProcessStepsStepHeadingOverflowWrap = "anywhere";
118
+ export const denhaagProcessStepsStepHeadingNotCheckedColor = "#000000";
119
+ export const denhaagProcessStepsStepHeadingCheckedColor = "#000000";
120
+ export const denhaagProcessStepsStepHeadingCheckedFontSize =
121
+ "clamp(0.9275rem, 0.8383rem + 0.3807vw, 1.1rem)";
122
+ export const denhaagProcessStepsStepHeadingCheckedFontWeight = "700";
123
+ export const denhaagProcessStepsStepHeadingCheckedLineHeight = "1.75";
124
+ export const denhaagProcessStepsStepHeadingCurrentColor = "#1d70b8";
125
+ export const denhaagProcessStepsStepHeadingCurrentFontSize =
126
+ "clamp(0.9275rem, 0.8383rem + 0.3807vw, 1.1rem)";
127
+ export const denhaagProcessStepsStepHeadingCurrentFontWeight = "700";
128
+ export const denhaagProcessStepsStepHeadingCurrentLineHeight = "1.75";
129
+ export const denhaagProcessStepsStepHeadingWarningColor = "#f97316";
130
+ export const denhaagProcessStepsStepHeadingErrorColor = "#dc3545";
131
+ export const denhaagProcessStepsStepMetaColor = "#000000";
132
+ export const denhaagProcessStepsStepMetaFontSize = "16px";
133
+ export const denhaagProcessStepsStepMetaDateColor = "#000000";
134
+ export const denhaagProcessStepsStepMetaDateFontSize =
135
+ "clamp(0.8255rem, 0.7822rem + 0.1845vw, 0.9091rem)";
136
+ export const denhaagProcessStepsStepMetaNestedFontSize = "14px";
137
+ export const denhaagProcessStepsStepMetaNestedMarginBlockStart = "4px";
138
+ export const denhaagProcessStepsStepContentColor = "#ced4da";
139
+ export const denhaagStepMarkerSize = "32px";
140
+ export const denhaagStepMarkerBorderWidth = "2px";
141
+ export const denhaagStepMarkerFontWeight = "400";
142
+ export const denhaagStepMarkerMargin = "0";
143
+ export const denhaagStepMarkerPadding = "12px";
144
+ export const denhaagStepMarkerIconSize = "20px";
145
+ export const denhaagStepMarkerNestedSize = "16px";
146
+ export const denhaagStepMarkerNestedIconSize = "10px";
147
+ export const denhaagStepMarkerFontFamily = "system-ui, sans-serif";
148
+ export const denhaagStepMarkerFontSize =
149
+ "clamp(0.8255rem, 0.7822rem + 0.1845vw, 0.9091rem)";
150
+ export const denhaagStepMarkerDefaultBackgroundColor = "#ced4da";
151
+ export const denhaagStepMarkerDefaultBorderColor = "#ced4da";
152
+ export const denhaagStepMarkerDefaultColor = "#ffffff";
153
+ export const denhaagStepMarkerDefaultNestedColor = "#ced4da";
154
+ export const denhaagStepMarkerCheckedBackgroundColor = "#ffffff";
155
+ export const denhaagStepMarkerCheckedBorderColor = "#1d70b8";
156
+ export const denhaagStepMarkerCheckedColor = "#1d70b8";
157
+ export const denhaagStepMarkerCurrentBackgroundColor = "#1d70b8";
158
+ export const denhaagStepMarkerCurrentBorderColor = "#1d70b8";
159
+ export const denhaagStepMarkerCurrentColor = "#ffffff";
160
+ export const denhaagStepMarkerCurrentNestedColor = "#1d70b8";
161
+ export const denhaagStepMarkerNotCheckedBackgroundColor = "#ffffff";
162
+ export const denhaagStepMarkerNotCheckedBorderColor = "#ced4da";
163
+ export const denhaagStepMarkerNotCheckedColor = "#000000";
164
+ export const denhaagStepMarkerDisabledBackgroundColor = "#ced4da";
165
+ export const denhaagStepMarkerDisabledBorderColor = "#ced4da";
166
+ export const denhaagStepMarkerDisabledColor = "#343a40";
167
+ export const denhaagStepMarkerWarningBackgroundColor = "#f97316";
168
+ export const denhaagStepMarkerWarningBorderColor = "#f97316";
169
+ export const denhaagStepMarkerWarningColor = "#ffffff";
170
+ export const denhaagStepMarkerWarningNestedBackgroundColor = "#ffffff";
171
+ export const denhaagStepMarkerWarningNestedBorderColor = "#f97316";
172
+ export const denhaagStepMarkerErrorBackgroundColor = "#dc3545";
173
+ export const denhaagStepMarkerErrorBorderColor = "#dc3545";
174
+ export const denhaagStepMarkerErrorColor = "#ffffff";
175
+ export const denhaagStepMarkerConnectorOutlineWidth = "1px";
176
+ export const denhaagStepMarkerConnectorDefaultOutlineColor = "#ced4da";
177
+ export const denhaagStepMarkerConnectorNotCheckedOutlineColor = "#ced4da";
178
+ export const denhaagStepMarkerConnectorCheckedOutlineColor = "#1d70b8";
179
+ export const denhaagStepMarkerConnectorWarningOutlineColor = "#fb923c";
180
+ export const denhaagStepMarkerConnectorErrorOutlineColor = "#dc3545";
181
+ export const utrechtButtonSubtleBackgroundColor = "transparent";
182
+ export const utrechtButtonSubtleColor = "auto";
183
+ export const utrechtButtonSubtleFontSize =
184
+ "clamp(0.875rem, 0.8103rem + 0.2759vw, 1rem)";
185
+ export const utrechtButtonPaddingBlockStart = "0";
186
+ export const utrechtButtonPaddingBlockEnd = "0";
187
+ export const utrechtButtonPaddingInlineStart = "0";
188
+ export const utrechtButtonPaddingInlineEnd = "0";
189
+ export const utrechtButtonIconGap = "4px";
package/dist/theme.css ADDED
@@ -0,0 +1,181 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ .theme-owc {
6
+ --owc-color-primary: #1d70b8;
7
+ --owc-color-secondary: #4d4d4d;
8
+ --owc-color-success: #28a745;
9
+ --owc-color-warning: #ffc107;
10
+ --owc-color-danger: #dc3545;
11
+ --owc-typography-font-family-sans: system-ui, sans-serif;
12
+ --owc-typography-font-size-sm: clamp(0.8255rem, 0.7822rem + 0.1845vw, 0.9091rem);
13
+ --owc-typography-font-size-base: clamp(0.875rem, 0.8103rem + 0.2759vw, 1rem);
14
+ --owc-typography-font-size-xl: clamp(0.9275rem, 0.8383rem + 0.3807vw, 1.1rem);
15
+ --owc-typography-line-height-base: 1.75;
16
+ --owc-button-border-width: 1px;
17
+ --owc-button-border-radius: 4px;
18
+ --owc-button-padding-block: .7rem;
19
+ --owc-button-padding-inline: 1.2rem;
20
+ --owc-button-font-size: 16px;
21
+ --owc-button-font-weight: 600;
22
+ --owc-focus-outline-width: 2px;
23
+ --owc-focus-outline-style: solid;
24
+ --owc-focus-outline-offset: 2px;
25
+ --nl-button-default-background-color: transparent;
26
+ --nl-button-default-hover-color: #ffffff;
27
+ --nl-button-default-active-color: #ffffff;
28
+ --nl-button-default-disabled-background-color: transparent;
29
+ --nl-button-default-disabled-border-color: #ced4da;
30
+ --nl-button-default-disabled-color: #6c757d;
31
+ --nl-button-default-focus-color: #ffffff;
32
+ --nl-button-primary-color: #ffffff;
33
+ --nl-button-primary-hover-color: #ffffff;
34
+ --nl-button-primary-active-color: #ffffff;
35
+ --nl-button-primary-disabled-background-color: #ced4da;
36
+ --nl-button-primary-disabled-border-color: #ced4da;
37
+ --nl-button-primary-disabled-color: #6c757d;
38
+ --nl-button-secondary-background-color: transparent;
39
+ --nl-button-secondary-hover-color: #ffffff;
40
+ --nl-button-secondary-active-color: #ffffff;
41
+ --nl-button-secondary-disabled-background-color: transparent;
42
+ --nl-button-secondary-disabled-border-color: #ced4da;
43
+ --nl-button-secondary-disabled-color: #6c757d;
44
+ --nl-button-subtle-background-color: transparent;
45
+ --nl-button-subtle-border-color: transparent;
46
+ --nl-button-subtle-hover-background-color: transparent;
47
+ --nl-button-subtle-hover-border-color: transparent;
48
+ --nl-button-subtle-active-background-color: transparent;
49
+ --nl-button-subtle-active-border-color: transparent;
50
+ --nl-button-subtle-disabled-background-color: transparent;
51
+ --nl-button-subtle-disabled-border-color: transparent;
52
+ --nl-button-subtle-disabled-color: #6c757d;
53
+ --nl-button-focus-color: #ffffff;
54
+ --denhaag-process-steps-line-height: 24px;
55
+ --denhaag-process-steps-step-padding-block-start: 0;
56
+ --denhaag-process-steps-step-padding-block-end: 0;
57
+ --denhaag-process-steps-step-distance: 40px;
58
+ --denhaag-process-steps-sub-step-distance: 12px;
59
+ --denhaag-process-steps-step-content-margin: 12px;
60
+ --denhaag-process-steps-step-header-align-items: center;
61
+ --denhaag-process-steps-step-collapse-icon-size: 16px;
62
+ --denhaag-process-steps-step-collapse-icon-padding: 4px;
63
+ --denhaag-process-steps-step-heading-color: #000000;
64
+ --denhaag-process-steps-step-heading-font-weight: 400;
65
+ --denhaag-process-steps-step-heading-overflow-wrap: anywhere;
66
+ --denhaag-process-steps-step-heading-not-checked-color: #000000;
67
+ --denhaag-process-steps-step-heading-checked-color: #000000;
68
+ --denhaag-process-steps-step-heading-checked-font-weight: 700;
69
+ --denhaag-process-steps-step-heading-current-font-weight: 700;
70
+ --denhaag-process-steps-step-heading-warning-color: #f97316;
71
+ --denhaag-process-steps-step-meta-color: #000000;
72
+ --denhaag-process-steps-step-meta-font-size: 16px;
73
+ --denhaag-process-steps-step-meta-date-color: #000000;
74
+ --denhaag-process-steps-step-meta-nested-font-size: 14px;
75
+ --denhaag-process-steps-step-meta-nested-margin-block-start: 4px;
76
+ --denhaag-process-steps-step-content-color: #ced4da;
77
+ --denhaag-step-marker-size: 32px;
78
+ --denhaag-step-marker-border-width: 2px;
79
+ --denhaag-step-marker-font-weight: 400;
80
+ --denhaag-step-marker-margin: 0;
81
+ --denhaag-step-marker-padding: 12px;
82
+ --denhaag-step-marker-icon-size: 20px;
83
+ --denhaag-step-marker-nested-size: 16px;
84
+ --denhaag-step-marker-nested-icon-size: 10px;
85
+ --denhaag-step-marker-default-background-color: #ced4da;
86
+ --denhaag-step-marker-default-border-color: #ced4da;
87
+ --denhaag-step-marker-default-color: #ffffff;
88
+ --denhaag-step-marker-default-nested-color: #ced4da;
89
+ --denhaag-step-marker-checked-background-color: #ffffff;
90
+ --denhaag-step-marker-current-color: #ffffff;
91
+ --denhaag-step-marker-not-checked-background-color: #ffffff;
92
+ --denhaag-step-marker-not-checked-border-color: #ced4da;
93
+ --denhaag-step-marker-not-checked-color: #000000;
94
+ --denhaag-step-marker-disabled-background-color: #ced4da;
95
+ --denhaag-step-marker-disabled-border-color: #ced4da;
96
+ --denhaag-step-marker-disabled-color: #343a40;
97
+ --denhaag-step-marker-warning-background-color: #f97316;
98
+ --denhaag-step-marker-warning-border-color: #f97316;
99
+ --denhaag-step-marker-warning-color: #ffffff;
100
+ --denhaag-step-marker-warning-nested-background-color: #ffffff;
101
+ --denhaag-step-marker-warning-nested-border-color: #f97316;
102
+ --denhaag-step-marker-error-color: #ffffff;
103
+ --denhaag-step-marker-connector-outline-width: 1px;
104
+ --denhaag-step-marker-connector-default-outline-color: #ced4da;
105
+ --denhaag-step-marker-connector-not-checked-outline-color: #ced4da;
106
+ --denhaag-step-marker-connector-warning-outline-color: #fb923c;
107
+ --utrecht-button-subtle-background-color: transparent;
108
+ --utrecht-button-subtle-color: auto;
109
+ --utrecht-button-padding-block-start: 0;
110
+ --utrecht-button-padding-block-end: 0;
111
+ --utrecht-button-padding-inline-start: 0;
112
+ --utrecht-button-padding-inline-end: 0;
113
+ --utrecht-button-icon-gap: 4px;
114
+ --nl-button-border-radius: var(--owc-button-border-radius);
115
+ --nl-button-font-family: var(--owc-typography-font-family-sans);
116
+ --nl-button-padding-block-start: var(--owc-button-padding-block);
117
+ --nl-button-padding-block-end: var(--owc-button-padding-block);
118
+ --nl-button-padding-inline-start: var(--owc-button-padding-inline);
119
+ --nl-button-padding-inline-end: var(--owc-button-padding-inline);
120
+ --nl-button-default-border-color: var(--owc-color-primary);
121
+ --nl-button-default-border-width: var(--owc-button-border-width);
122
+ --nl-button-default-color: var(--owc-color-primary);
123
+ --nl-button-default-font-size: var(--owc-button-font-size);
124
+ --nl-button-default-font-weight: var(--owc-button-font-weight);
125
+ --nl-button-default-hover-background-color: var(--owc-color-primary);
126
+ --nl-button-default-hover-border-color: var(--owc-color-primary);
127
+ --nl-button-default-active-background-color: var(--owc-color-primary);
128
+ --nl-button-default-active-border-color: var(--owc-color-primary);
129
+ --nl-button-default-focus-background-color: var(--owc-color-primary);
130
+ --nl-button-default-focus-border-color: var(--owc-color-primary);
131
+ --nl-button-primary-background-color: var(--owc-color-primary);
132
+ --nl-button-primary-border-color: var(--owc-color-primary);
133
+ --nl-button-primary-border-width: var(--owc-button-border-width);
134
+ --nl-button-primary-font-size: var(--owc-button-font-size);
135
+ --nl-button-primary-font-weight: var(--owc-button-font-weight);
136
+ --nl-button-primary-hover-background-color: var(--owc-color-primary);
137
+ --nl-button-primary-hover-border-color: var(--owc-color-primary);
138
+ --nl-button-primary-active-background-color: var(--owc-color-primary);
139
+ --nl-button-primary-active-border-color: var(--owc-color-primary);
140
+ --nl-button-secondary-border-color: var(--owc-color-primary);
141
+ --nl-button-secondary-border-width: var(--owc-button-border-width);
142
+ --nl-button-secondary-color: var(--owc-color-primary);
143
+ --nl-button-secondary-font-size: var(--owc-button-font-size);
144
+ --nl-button-secondary-font-weight: var(--owc-button-font-weight);
145
+ --nl-button-secondary-hover-background-color: var(--owc-color-primary);
146
+ --nl-button-secondary-hover-border-color: var(--owc-color-primary);
147
+ --nl-button-secondary-active-background-color: var(--owc-color-primary);
148
+ --nl-button-secondary-active-border-color: var(--owc-color-primary);
149
+ --nl-button-subtle-border-width: var(--owc-button-border-width);
150
+ --nl-button-subtle-color: var(--owc-color-primary);
151
+ --nl-button-subtle-font-size: var(--owc-button-font-size);
152
+ --nl-button-subtle-font-weight: var(--owc-button-font-weight);
153
+ --nl-button-subtle-hover-color: var(--owc-color-primary);
154
+ --nl-button-subtle-active-color: var(--owc-color-primary);
155
+ --nl-button-focus-background-color: var(--owc-color-primary);
156
+ --nl-button-focus-border-color: var(--owc-color-primary);
157
+ --denhaag-process-steps-font-family: var(--owc-typography-font-family-sans);
158
+ --denhaag-process-steps-font-size: var(--owc-typography-font-size-base);
159
+ --denhaag-process-steps-step-heading-font-family: var(--owc-typography-font-family-sans);
160
+ --denhaag-process-steps-step-heading-font-size: var(--owc-typography-font-size-xl);
161
+ --denhaag-process-steps-step-heading-line-height: var(--owc-typography-line-height-base);
162
+ --denhaag-process-steps-step-heading-checked-font-size: var(--owc-typography-font-size-xl);
163
+ --denhaag-process-steps-step-heading-checked-line-height: var(--owc-typography-line-height-base);
164
+ --denhaag-process-steps-step-heading-current-color: var(--owc-color-primary);
165
+ --denhaag-process-steps-step-heading-current-font-size: var(--owc-typography-font-size-xl);
166
+ --denhaag-process-steps-step-heading-current-line-height: var(--owc-typography-line-height-base);
167
+ --denhaag-process-steps-step-heading-error-color: var(--owc-color-danger);
168
+ --denhaag-process-steps-step-meta-date-font-size: var(--owc-typography-font-size-sm);
169
+ --denhaag-step-marker-font-family: var(--owc-typography-font-family-sans);
170
+ --denhaag-step-marker-font-size: var(--owc-typography-font-size-sm);
171
+ --denhaag-step-marker-checked-border-color: var(--owc-color-primary);
172
+ --denhaag-step-marker-checked-color: var(--owc-color-primary);
173
+ --denhaag-step-marker-current-background-color: var(--owc-color-primary);
174
+ --denhaag-step-marker-current-border-color: var(--owc-color-primary);
175
+ --denhaag-step-marker-current-nested-color: var(--owc-color-primary);
176
+ --denhaag-step-marker-error-background-color: var(--owc-color-danger);
177
+ --denhaag-step-marker-error-border-color: var(--owc-color-danger);
178
+ --denhaag-step-marker-connector-checked-outline-color: var(--owc-color-primary);
179
+ --denhaag-step-marker-connector-error-outline-color: var(--owc-color-danger);
180
+ --utrecht-button-subtle-font-size: var(--owc-typography-font-size-base);
181
+ }
package/dist/tokens.json ADDED
@@ -0,0 +1,291 @@
1
+ {
2
+ "owc": {
3
+ "color": {
4
+ "primary": "#1d70b8",
5
+ "secondary": "#4d4d4d",
6
+ "success": "#28a745",
7
+ "warning": "#ffc107",
8
+ "danger": "#dc3545"
9
+ },
10
+ "typography": {
11
+ "font-family": {
12
+ "sans": "system-ui, sans-serif"
13
+ },
14
+ "font-size": {
15
+ "sm": "clamp(0.8255rem, 0.7822rem + 0.1845vw, 0.9091rem)",
16
+ "base": "clamp(0.875rem, 0.8103rem + 0.2759vw, 1rem)",
17
+ "xl": "clamp(0.9275rem, 0.8383rem + 0.3807vw, 1.1rem)"
18
+ },
19
+ "line-height": {
20
+ "base": "1.75"
21
+ }
22
+ },
23
+ "button": {
24
+ "border-width": "1px",
25
+ "border-radius": "4px",
26
+ "padding-block": ".7rem",
27
+ "padding-inline": "1.2rem",
28
+ "font-size": "16px",
29
+ "font-weight": "600"
30
+ },
31
+ "focus": {
32
+ "outline-width": "2px",
33
+ "outline-style": "solid",
34
+ "outline-offset": "2px"
35
+ }
36
+ },
37
+ "nl": {
38
+ "button": {
39
+ "border-radius": "4px",
40
+ "font-family": "system-ui, sans-serif",
41
+ "padding-block-start": ".7rem",
42
+ "padding-block-end": ".7rem",
43
+ "padding-inline-start": "1.2rem",
44
+ "padding-inline-end": "1.2rem",
45
+ "default": {
46
+ "background-color": "transparent",
47
+ "border-color": "#1d70b8",
48
+ "border-width": "1px",
49
+ "color": "#1d70b8",
50
+ "font-size": "16px",
51
+ "font-weight": "600",
52
+ "hover": {
53
+ "background-color": "#1d70b8",
54
+ "border-color": "#1d70b8",
55
+ "color": "#ffffff"
56
+ },
57
+ "active": {
58
+ "background-color": "#1d70b8",
59
+ "border-color": "#1d70b8",
60
+ "color": "#ffffff"
61
+ },
62
+ "disabled": {
63
+ "background-color": "transparent",
64
+ "border-color": "#ced4da",
65
+ "color": "#6c757d"
66
+ },
67
+ "focus": {
68
+ "background-color": "#1d70b8",
69
+ "border-color": "#1d70b8",
70
+ "color": "#ffffff"
71
+ }
72
+ },
73
+ "primary": {
74
+ "background-color": "#1d70b8",
75
+ "border-color": "#1d70b8",
76
+ "border-width": "1px",
77
+ "color": "#ffffff",
78
+ "font-size": "16px",
79
+ "font-weight": "600",
80
+ "hover": {
81
+ "background-color": "#1d70b8",
82
+ "border-color": "#1d70b8",
83
+ "color": "#ffffff"
84
+ },
85
+ "active": {
86
+ "background-color": "#1d70b8",
87
+ "border-color": "#1d70b8",
88
+ "color": "#ffffff"
89
+ },
90
+ "disabled": {
91
+ "background-color": "#ced4da",
92
+ "border-color": "#ced4da",
93
+ "color": "#6c757d"
94
+ }
95
+ },
96
+ "secondary": {
97
+ "background-color": "transparent",
98
+ "border-color": "#1d70b8",
99
+ "border-width": "1px",
100
+ "color": "#1d70b8",
101
+ "font-size": "16px",
102
+ "font-weight": "600",
103
+ "hover": {
104
+ "background-color": "#1d70b8",
105
+ "border-color": "#1d70b8",
106
+ "color": "#ffffff"
107
+ },
108
+ "active": {
109
+ "background-color": "#1d70b8",
110
+ "border-color": "#1d70b8",
111
+ "color": "#ffffff"
112
+ },
113
+ "disabled": {
114
+ "background-color": "transparent",
115
+ "border-color": "#ced4da",
116
+ "color": "#6c757d"
117
+ }
118
+ },
119
+ "subtle": {
120
+ "background-color": "transparent",
121
+ "border-color": "transparent",
122
+ "border-width": "1px",
123
+ "color": "#1d70b8",
124
+ "font-size": "16px",
125
+ "font-weight": "600",
126
+ "hover": {
127
+ "background-color": "transparent",
128
+ "border-color": "transparent",
129
+ "color": "#1d70b8"
130
+ },
131
+ "active": {
132
+ "background-color": "transparent",
133
+ "border-color": "transparent",
134
+ "color": "#1d70b8"
135
+ },
136
+ "disabled": {
137
+ "background-color": "transparent",
138
+ "border-color": "transparent",
139
+ "color": "#6c757d"
140
+ }
141
+ },
142
+ "focus": {
143
+ "background-color": "#1d70b8",
144
+ "border-color": "#1d70b8",
145
+ "color": "#ffffff"
146
+ }
147
+ }
148
+ },
149
+ "denhaag": {
150
+ "process-steps": {
151
+ "font-family": "system-ui, sans-serif",
152
+ "font-size": "clamp(0.875rem, 0.8103rem + 0.2759vw, 1rem)",
153
+ "line-height": "24px",
154
+ "step-padding-block-start": "0",
155
+ "step-padding-block-end": "0",
156
+ "step-distance": "40px",
157
+ "sub-step-distance": "12px",
158
+ "step-content-margin": "12px",
159
+ "step-header-align-items": "center",
160
+ "step-collapse-icon-size": "16px",
161
+ "step-collapse-icon-padding": "4px",
162
+ "step-heading": {
163
+ "color": "#000000",
164
+ "font-family": "system-ui, sans-serif",
165
+ "font-size": "clamp(0.9275rem, 0.8383rem + 0.3807vw, 1.1rem)",
166
+ "font-weight": "400",
167
+ "line-height": "1.75",
168
+ "overflow-wrap": "anywhere",
169
+ "not-checked": {
170
+ "color": "#000000"
171
+ },
172
+ "checked": {
173
+ "color": "#000000",
174
+ "font-size": "clamp(0.9275rem, 0.8383rem + 0.3807vw, 1.1rem)",
175
+ "font-weight": "700",
176
+ "line-height": "1.75"
177
+ },
178
+ "current": {
179
+ "color": "#1d70b8",
180
+ "font-size": "clamp(0.9275rem, 0.8383rem + 0.3807vw, 1.1rem)",
181
+ "font-weight": "700",
182
+ "line-height": "1.75"
183
+ },
184
+ "warning": {
185
+ "color": "#f97316"
186
+ },
187
+ "error": {
188
+ "color": "#dc3545"
189
+ }
190
+ },
191
+ "step-meta": {
192
+ "color": "#000000",
193
+ "font-size": "16px",
194
+ "date": {
195
+ "color": "#000000",
196
+ "font-size": "clamp(0.8255rem, 0.7822rem + 0.1845vw, 0.9091rem)"
197
+ },
198
+ "nested": {
199
+ "font-size": "14px",
200
+ "margin-block-start": "4px"
201
+ }
202
+ },
203
+ "step-content": {
204
+ "color": "#ced4da"
205
+ }
206
+ },
207
+ "step-marker": {
208
+ "size": "32px",
209
+ "border-width": "2px",
210
+ "font-weight": "400",
211
+ "margin": "0",
212
+ "padding": "12px",
213
+ "icon-size": "20px",
214
+ "nested-size": "16px",
215
+ "nested-icon-size": "10px",
216
+ "font-family": "system-ui, sans-serif",
217
+ "font-size": "clamp(0.8255rem, 0.7822rem + 0.1845vw, 0.9091rem)",
218
+ "default": {
219
+ "background-color": "#ced4da",
220
+ "border-color": "#ced4da",
221
+ "color": "#ffffff",
222
+ "nested-color": "#ced4da"
223
+ },
224
+ "checked": {
225
+ "background-color": "#ffffff",
226
+ "border-color": "#1d70b8",
227
+ "color": "#1d70b8"
228
+ },
229
+ "current": {
230
+ "background-color": "#1d70b8",
231
+ "border-color": "#1d70b8",
232
+ "color": "#ffffff",
233
+ "nested-color": "#1d70b8"
234
+ },
235
+ "not-checked": {
236
+ "background-color": "#ffffff",
237
+ "border-color": "#ced4da",
238
+ "color": "#000000"
239
+ },
240
+ "disabled": {
241
+ "background-color": "#ced4da",
242
+ "border-color": "#ced4da",
243
+ "color": "#343a40"
244
+ },
245
+ "warning": {
246
+ "background-color": "#f97316",
247
+ "border-color": "#f97316",
248
+ "color": "#ffffff",
249
+ "nested-background-color": "#ffffff",
250
+ "nested-border-color": "#f97316"
251
+ },
252
+ "error": {
253
+ "background-color": "#dc3545",
254
+ "border-color": "#dc3545",
255
+ "color": "#ffffff"
256
+ },
257
+ "connector": {
258
+ "outline-width": "1px",
259
+ "default": {
260
+ "outline-color": "#ced4da"
261
+ },
262
+ "not-checked": {
263
+ "outline-color": "#ced4da"
264
+ },
265
+ "checked": {
266
+ "outline-color": "#1d70b8"
267
+ },
268
+ "warning": {
269
+ "outline-color": "#fb923c"
270
+ },
271
+ "error": {
272
+ "outline-color": "#dc3545"
273
+ }
274
+ }
275
+ }
276
+ },
277
+ "utrecht": {
278
+ "button": {
279
+ "subtle": {
280
+ "background-color": "transparent",
281
+ "color": "auto",
282
+ "font-size": "clamp(0.875rem, 0.8103rem + 0.2759vw, 1rem)"
283
+ },
284
+ "padding-block-start": "0",
285
+ "padding-block-end": "0",
286
+ "padding-inline-start": "0",
287
+ "padding-inline-end": "0",
288
+ "icon-gap": "4px"
289
+ }
290
+ }
291
+ }
package/package.json ADDED
@@ -0,0 +1,39 @@
1
+ {
2
+ "name": "@openwebconcept/theme-owc",
3
+ "version": "1.0.0",
4
+ "author": "Community for NL Design System",
5
+ "description": "Default OpenWebconcept theme — emits OWC brand tokens scoped to the .theme-owc selector",
6
+ "license": "SEE LICENSE IN LICENSE.md",
7
+ "keywords": [
8
+ "nl-design-system",
9
+ "design-tokens",
10
+ "openwebconcept",
11
+ "theme"
12
+ ],
13
+ "publishConfig": {
14
+ "access": "public"
15
+ },
16
+ "repository": {
17
+ "type": "git+ssh",
18
+ "url": "git@github.com:openwebconcept/nl-design-system.git",
19
+ "directory": "proprietary/theme-owc"
20
+ },
21
+ "peerDependencies": {
22
+ "@openwebconcept/design-tokens": "1.0.0"
23
+ },
24
+ "devDependencies": {
25
+ "chokidar-cli": "3.0.0",
26
+ "rimraf": "6.1.3",
27
+ "sass": "1.97.3",
28
+ "style-dictionary": "5.3.1"
29
+ },
30
+ "scripts": {
31
+ "clean": "rimraf dist/",
32
+ "build": "pnpm run --sequential '/^build:.+$/'",
33
+ "build:clean": "pnpm run clean",
34
+ "build:style-dictionary": "style-dictionary build --config ./style-dictionary.config.json",
35
+ "build:index": "sass src/index.scss dist/index.css --no-source-map",
36
+ "watch": "pnpm run '/^watch:.+$/'",
37
+ "watch:style-dictionary": "chokidar --follow-symlinks --initial --command 'pnpm run build' 'src/**/*.tokens.json'"
38
+ }
39
+ }
package/src/index.scss ADDED
@@ -0,0 +1,2 @@
1
+ /* OpenWebconcept Theme */
2
+ @import './theme.css';
package/style-dictionary.config.json ADDED
@@ -0,0 +1,57 @@
1
+ {
2
+ "usesDtcg": true,
3
+ "source": ["./src/**/tokens.json", "./src/**/*.tokens.json"],
4
+ "include": [
5
+ "node_modules/@openwebconcept/design-tokens/src/**/*.tokens.json",
6
+ "../design-tokens/src/**/*.tokens.json"
7
+ ],
8
+ "platforms": {
9
+ "css": {
10
+ "transforms": ["name/kebab", "color/hsl-4"],
11
+ "buildPath": "dist/",
12
+ "files": [
13
+ {
14
+ "destination": "theme.css",
15
+ "format": "css/variables",
16
+ "options": {
17
+ "selector": ".theme-owc",
18
+ "outputReferences": true
19
+ }
20
+ }
21
+ ]
22
+ },
23
+ "scss": {
24
+ "transforms": ["name/kebab", "color/hsl-4"],
25
+ "buildPath": "dist/",
26
+ "files": [
27
+ {
28
+ "destination": "_variables.scss",
29
+ "format": "scss/variables",
30
+ "options": {
31
+ "outputReferences": true
32
+ }
33
+ }
34
+ ]
35
+ },
36
+ "js": {
37
+ "transforms": ["name/camel", "color/hsl-4"],
38
+ "buildPath": "dist/",
39
+ "files": [
40
+ {
41
+ "destination": "index.js",
42
+ "format": "javascript/es6"
43
+ }
44
+ ]
45
+ },
46
+ "json": {
47
+ "transforms": ["name/camel", "color/hsl-4"],
48
+ "buildPath": "dist/",
49
+ "files": [
50
+ {
51
+ "destination": "tokens.json",
52
+ "format": "json/nested"
53
+ }
54
+ ]
55
+ }
56
+ }
57
+ }