@lablup/ui-common 0.1.0-alpha.1 → 0.1.0-alpha.2

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 (12) hide show
  1. package/README.md +9 -2
  2. package/dist/index.d.ts +5 -3
  3. package/dist/styles/base.css +44 -46
  4. package/package.json +1 -1
  5. package/dist/styles/themes/bliss-dark.css +0 -123
  6. package/dist/styles/themes/bliss-light.css +0 -123
  7. package/dist/styles/themes/glass-dark.css +0 -124
  8. package/dist/styles/themes/glass-light.css +0 -125
  9. package/dist/styles/themes/reverie-dark.css +0 -104
  10. package/dist/styles/themes/reverie-light.css +0 -104
  11. package/dist/styles/themes/stained-dark.css +0 -80
  12. package/dist/styles/themes/stained-light.css +0 -80
package/README.md CHANGED
@@ -65,12 +65,19 @@ theme:
65
65
 
66
66
  ```ts
67
67
  // The token contract the components resolve against. Required.
68
+ // It also carries the default palette, so this alone is a working theme.
68
69
  import "@lablup/ui-common/styles/base.css";
69
70
 
70
- // One theme family. Import only the ones you ship.
71
- import "@lablup/ui-common/styles/themes/bliss-light.css";
71
+ // Optional, and only if you switch themes at runtime through [data-theme].
72
+ import "@lablup/ui-common/styles/themes/orange-dark.css";
72
73
  ```
73
74
 
75
+ The package ships the theming mechanism and one default palette, the Lablup
76
+ brand orange. A product with its own visual identity defines its own
77
+ `[data-theme]` blocks over the same 113 token names and ships them itself,
78
+ rather than the package accumulating everyone's palettes. The source product
79
+ does exactly that with its five families.
80
+
74
81
  Component CSS travels with the component: importing `Button` brings
75
82
  `Button.css` with it, so a subpath import pulls that component's styles and no
76
83
  others. The two entry points above are the only stylesheets you import by hand,
package/dist/index.d.ts CHANGED
@@ -6,9 +6,11 @@
6
6
  * `@lablup/ui-common/components/<Name>` when you want the smallest
7
7
  * possible graph (see the component subpath exports in package.json).
8
8
  *
9
- * Styling is opt-in and lives in a separate entry point:
10
- * `@lablup/ui-common/styles/base.css` (required) plus at most one
11
- * `@lablup/ui-common/styles/themes/<theme>.css` (optional).
9
+ * Component CSS travels with the component. What stays opt-in is the palette:
10
+ * `@lablup/ui-common/styles/base.css` (required, and the default theme on its
11
+ * own) plus `styles/themes/orange-dark.css` if you switch through
12
+ * `[data-theme]`. A product with its own identity ships its own themes over
13
+ * the same token names.
12
14
  */
13
15
  export * from './components/BaseCard';
14
16
  export * from './components/Badge';
package/dist/styles/base.css CHANGED
@@ -5,30 +5,36 @@
5
5
  * reads. This file is the token contract: renaming or removing an entry is
6
6
  * a breaking change, exactly like renaming a prop (see CONTRIBUTING.md).
7
7
  *
8
- * Values are the resolved defaults of the source product's default theme
9
- * (theme family "stained", color scheme "light"), taken from that product's
10
- * `src/themes/base.css` (structural tokens: spacing, radius, motion, type
11
- * scale, focus ring, z-index) and `src/themes/tokens/stained-light.css`
12
- * (color and button tokens). A handful of tokens that no source theme
13
- * ever defines (e.g. `--token-colorTextQuaternary`, `--token-marginXXS`)
14
- * are given the same literal fallback value the component CSS already
15
- * carries at its call site.
8
+ * Colour and button values are the Lablup brand default, theme family
9
+ * "orange", colour scheme "light", which is also the one theme this package
10
+ * ships as a stylesheet (`styles/themes/orange-light.css` and its dark
11
+ * counterpart). Structural tokens (spacing, radius, motion, type scale, focus
12
+ * ring, z-index) are theme-independent and were taken from the source
13
+ * product's `src/themes/base.css`. A handful of tokens that no theme ever
14
+ * defines (e.g. `--token-colorTextQuaternary`, `--token-marginXXS`) are given
15
+ * the same literal fallback value the component CSS already carries at its
16
+ * call site.
17
+ *
18
+ * A product with its own visual identity defines its own `[data-theme]`
19
+ * blocks over these 113 names and ships them itself, the way the source
20
+ * product does with its five families. This package carries the mechanism and
21
+ * one default, not a catalogue of somebody else's palettes.
16
22
  *
17
23
  * Every component also gives every token reference here its own inline
18
24
  * fallback, so a consumer that imports a component without this stylesheet
19
25
  * still gets a rendered (unthemed) result.
20
26
  *
21
- * Those inline fallbacks are NOT all equal to the values above. Roughly 143
22
- * of them were inherited verbatim from the source product, where they predate
23
- * current theme and were already dead code (the token is always defined, so
24
- * the fallback never applies). The most visible divergence is
25
- * `--token-colorPrimary`, whose call-site fallback is the older orange
26
- * `#ff7a00` rather than the current `#8b5cf6`.
27
+ * Those inline fallbacks are NOT all equal to the values above, and no single
28
+ * theme would make them agree: of the 252 references to a theme-defined token,
29
+ * the fallback matches orange-light in 135 and stained-light in 168, and
30
+ * `--token-colorPrimary` alone is written as `#ff7a00` in some components and
31
+ * `#8b5cf6` in others. They were inherited verbatim from the source product,
32
+ * where they were already dead code, since the token is always defined and the
33
+ * fallback never applies.
27
34
  *
28
35
  * Consequence: importing a component WITHOUT this stylesheet renders, but not
29
36
  * in the documented default palette. Import `styles/base.css`. Aligning the
30
- * fallbacks is a deliberate visual change and was left out of the extraction,
31
- * which was required to preserve current rendering exactly.
37
+ * fallbacks is a deliberate visual change and is still out of scope.
32
38
  */
33
39
 
34
40
  :root {
@@ -55,37 +61,29 @@
55
61
  --token-buttonGhostBackdrop: none;
56
62
  --token-buttonGhostBg: transparent;
57
63
  --token-buttonGhostBgActive: #f5f5f5;
58
- --token-buttonGhostBgHover: rgba(139, 92, 246, 0.06);
64
+ --token-buttonGhostBgHover: rgba(255, 122, 0, 0.06);
59
65
  --token-buttonGhostBorder: 1px solid transparent;
60
66
  --token-buttonGhostBorderHover: 1px solid transparent;
61
67
  --token-buttonGhostShadow: none;
62
68
  --token-buttonGhostShadowHover: none;
63
69
  --token-buttonPrimaryBackdrop: none;
64
- --token-buttonPrimaryBg:
65
- linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, transparent 50%), #8b5cf6;
66
- --token-buttonPrimaryBgHover:
67
- linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, transparent 50%), #7c3aed;
70
+ --token-buttonPrimaryBg: var(--token-colorPrimary);
71
+ --token-buttonPrimaryBgHover: #e86e00;
68
72
  --token-buttonPrimaryBorder: none;
69
- --token-buttonPrimaryShadow:
70
- 0 2px 6px rgba(139, 92, 246, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.2);
71
- --token-buttonPrimaryShadowHover:
72
- 0 4px 10px rgba(139, 92, 246, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.25);
73
+ --token-buttonPrimaryShadow: 0 2px 4px rgba(255, 122, 0, 0.2);
74
+ --token-buttonPrimaryShadowHover: 0 4px 8px rgba(255, 122, 0, 0.25);
73
75
  --token-buttonSecondaryBackdrop: none;
74
- --token-buttonSecondaryBg: rgba(139, 92, 246, 0.04);
76
+ --token-buttonSecondaryBg: transparent;
75
77
  --token-buttonSecondaryBgActive: #f5f5f5;
76
- --token-buttonSecondaryBgHover: rgba(139, 92, 246, 0.08);
77
- --token-buttonSecondaryBorder: 1px solid rgba(139, 92, 246, 0.2);
78
- --token-buttonSecondaryBorderHover: 1px solid rgba(139, 92, 246, 0.3);
79
- --token-buttonSecondaryShadow:
80
- 0 1px 3px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.8);
78
+ --token-buttonSecondaryBgHover: rgba(255, 122, 0, 0.06);
79
+ --token-buttonSecondaryBorder: 1px solid var(--token-colorBorder);
80
+ --token-buttonSecondaryBorderHover: 1px solid rgba(255, 122, 0, 0.3);
81
+ --token-buttonSecondaryShadow: none;
81
82
  --token-buttonSuccessBackdrop: none;
82
- --token-buttonSuccessBg:
83
- linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, transparent 50%), #007a63;
84
- --token-buttonSuccessBgHover:
85
- linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, transparent 50%), #006654;
83
+ --token-buttonSuccessBg: var(--token-colorSuccess);
84
+ --token-buttonSuccessBgHover: #006654;
86
85
  --token-buttonSuccessBorder: none;
87
- --token-buttonSuccessShadow:
88
- 0 2px 6px rgba(0, 189, 155, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.2);
86
+ --token-buttonSuccessShadow: 0 2px 4px rgba(0, 189, 155, 0.2);
89
87
  --token-colorBgContainer: #ffffff;
90
88
  --token-colorBgElevated: #ffffff;
91
89
  --token-colorBgLayout: #f5f5f5;
@@ -99,12 +97,12 @@
99
97
  --token-colorFillTertiary: #f9fafb;
100
98
  --token-colorError: #c82333;
101
99
  --token-colorInfo: #0066cc;
102
- --token-colorLink: #8b5cf6;
100
+ --token-colorLink: #ff7a00;
103
101
  --token-colorLinkHover: #7c3aed;
104
- --token-colorPrimary: #8b5cf6;
105
- --token-colorPrimaryActive: #6d28d9;
106
- --token-colorPrimaryBg: rgba(139, 92, 246, 0.1);
107
- --token-colorPrimaryBorder: rgba(139, 92, 246, 0.2);
102
+ --token-colorPrimary: #ff7a00;
103
+ --token-colorPrimaryActive: #cc6200;
104
+ --token-colorPrimaryBg: rgba(255, 122, 0, 0.1);
105
+ --token-colorPrimaryBorder: rgba(255, 122, 0, 0.2);
108
106
  --token-colorSuccess: #007a63;
109
107
  --token-colorSuccessActive: #005244;
110
108
  --token-colorSuccessBg: rgba(0, 189, 155, 0.05);
@@ -116,7 +114,7 @@
116
114
  --token-colorTextQuaternary: #bfbfbf;
117
115
  --token-colorTextSecondary: #595959;
118
116
  --token-colorTextTertiary: #737373;
119
- --token-focusRingColor: #8b5cf6;
117
+ --token-focusRingColor: #ff7a00;
120
118
  --token-focusRingOffset: 2px;
121
119
  --token-focusRingStyle: solid;
122
120
  --token-focusRingWidth: 2px;
@@ -141,9 +139,9 @@
141
139
  --token-motionDurationSlow: 0.3s;
142
140
  --token-themeTransitionDuration: 0.25s;
143
141
  --token-themeTransitionTiming: ease-in-out;
144
- --token-tabActiveBg: rgba(139, 92, 246, 0.1);
145
- --token-tabFocusShadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
146
- --token-tabHoverBg: #f3f4f6;
142
+ --token-tabActiveBg: rgba(255, 122, 0, 0.1);
143
+ --token-tabFocusShadow: 0 0 0 3px rgba(255, 122, 0, 0.15);
144
+ --token-tabHoverBg: var(--token-colorFillSecondary);
147
145
  --token-zIndexDrawer: 1100;
148
146
  --token-zIndexDrawerContent: 1101;
149
147
  --token-zIndexPopover: 1150;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lablup/ui-common",
3
- "version": "0.1.0-alpha.1",
3
+ "version": "0.1.0-alpha.2",
4
4
  "description": "Shared, product-neutral UI components and design tokens for Lablup products",
5
5
  "license": "Apache-2.0",
6
6
  "author": "Lablup Inc.",
package/dist/styles/themes/bliss-dark.css DELETED
@@ -1,123 +0,0 @@
1
- /**
2
- * @lablup/ui-common theme tokens: bliss-dark
3
- *
4
- * Overrides for the subset of the 104-token contract (see
5
- * ../base.css) that this theme customizes. Import at most one
6
- * theme file alongside base.css; components never import a
7
- * theme file themselves.
8
- */
9
-
10
- [data-theme="bliss-dark"] {
11
- --token-boxShadow: 0 1px 3px rgba(0, 0, 0, 0.3);
12
- --token-boxShadowSecondary: 0 2px 10px rgba(0, 0, 0, 0.4);
13
- --token-buttonActiveTransform: translateY(1px);
14
- --token-buttonBorderRadius: 3px;
15
- --token-buttonDangerBg: linear-gradient(
16
- 180deg,
17
- #ff7070 0%,
18
- #ff5c5c 45%,
19
- #e04040 100%
20
- );
21
- --token-buttonDangerBgActive: #cc3333;
22
- --token-buttonDangerBgHover: linear-gradient(
23
- 180deg,
24
- #ff8585 0%,
25
- #ff7070 45%,
26
- #ff5c5c 100%
27
- );
28
- --token-buttonDangerBorder: 1px solid #b52828;
29
- --token-buttonDangerShadow:
30
- inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 3px rgba(0, 0, 0, 0.4);
31
- --token-buttonDangerText: white;
32
- --token-buttonGhostBackdrop: none;
33
- --token-buttonGhostBg: transparent;
34
- --token-buttonGhostBgActive: rgba(255, 255, 255, 0.1);
35
- --token-buttonGhostBgHover: rgba(255, 255, 255, 0.06);
36
- --token-buttonGhostBorder: 1px solid transparent;
37
- --token-buttonGhostBorderHover: 1px solid rgba(255, 255, 255, 0.1);
38
- --token-buttonGhostShadow: none;
39
- --token-buttonGhostShadowHover: none;
40
- --token-buttonHoverTransform: none;
41
- --token-buttonPrimaryBg: linear-gradient(
42
- 180deg,
43
- #5a96f7 0%,
44
- #4b8bf5 45%,
45
- #3570d4 100%
46
- );
47
- --token-buttonPrimaryBgHover: linear-gradient(
48
- 180deg,
49
- #6ba3f5 0%,
50
- #5a96f7 45%,
51
- #4b8bf5 100%
52
- );
53
- --token-buttonPrimaryBorder: 1px solid #1b4aaf;
54
- --token-buttonPrimaryShadow:
55
- inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 3px rgba(0, 0, 0, 0.4);
56
- --token-buttonPrimaryShadowHover:
57
- inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 4px rgba(0, 0, 0, 0.45);
58
- --token-buttonSecondaryBackdrop: none;
59
- --token-buttonSecondaryBg: linear-gradient(180deg, #3a3e48 0%, #2e323c 100%);
60
- --token-buttonSecondaryBgActive: linear-gradient(
61
- 180deg,
62
- #1e2228 0%,
63
- #262a32 8%,
64
- #282c34 94%,
65
- #2e323c 100%
66
- );
67
- --token-buttonSecondaryBgHover: linear-gradient(180deg, #444854 0%, #3a3e48 100%);
68
- --token-buttonSecondaryBorder: 1px solid #4a4e58;
69
- --token-buttonSecondaryBorderHover: 1px solid #5a5e68;
70
- --token-buttonSecondaryShadow:
71
- inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -1px 0 rgba(0, 0, 0, 0.15),
72
- 0 1px 2px rgba(0, 0, 0, 0.3);
73
- --token-buttonSuccessBg: linear-gradient(
74
- 180deg,
75
- #5cbf60 0%,
76
- #4caf50 45%,
77
- #43a047 100%
78
- );
79
- --token-buttonSuccessBgHover: linear-gradient(
80
- 180deg,
81
- #6dcd70 0%,
82
- #5cbf60 45%,
83
- #4caf50 100%
84
- );
85
- --token-buttonSuccessBorder: 1px solid #2e7d32;
86
- --token-buttonSuccessShadow:
87
- inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 3px rgba(0, 0, 0, 0.4);
88
- --token-colorBgContainer: #22262e;
89
- --token-colorBgElevated: #2a2e38;
90
- --token-colorBgLayout: #1a1d24;
91
- --token-colorBorder: #3a3e48;
92
- --token-colorBorderSecondary: #2e323c;
93
- --token-colorError: #ff5c5c;
94
- --token-colorFillQuaternary: rgba(255, 255, 255, 0.02);
95
- --token-colorFillSecondary: rgba(255, 255, 255, 0.06);
96
- --token-colorFillTertiary: rgba(255, 255, 255, 0.04);
97
- --token-colorInfo: #4b8bf5;
98
- --token-colorLink: #4b8bf5;
99
- --token-colorPrimary: #4b8bf5;
100
- --token-colorPrimaryActive: #245edc;
101
- --token-colorPrimaryBg: rgba(75, 139, 245, 0.12);
102
- --token-colorPrimaryBorder: rgba(75, 139, 245, 0.3);
103
- --token-colorSuccess: #4caf50;
104
- --token-colorSuccessActive: #43a047;
105
- --token-colorSuccessBg: rgba(76, 175, 80, 0.12);
106
- --token-colorSuccessBorder: rgba(76, 175, 80, 0.4);
107
- --token-colorSuccessBorderHover: rgba(76, 175, 80, 0.6);
108
- --token-colorSuccessBoxShadow: 0 2px 6px rgba(76, 175, 80, 0.2);
109
- --token-colorText: #e8e6e0;
110
- --token-colorTextSecondary: #b5b3ac;
111
- --token-colorTextTertiary: #908e88;
112
- --token-colorWarning: #ffb74d;
113
- --token-focusRingColor: #4b8bf5;
114
- --token-focusRingOffset: 2px;
115
- --token-focusRingStyle: solid;
116
- --token-focusRingWidth: 2px;
117
- --token-fontFamily:
118
- "Tahoma", "Gulim", system-ui, -apple-system, BlinkMacSystemFont, "Ubuntu Sans",
119
- "Pretendard Variable", "Segoe UI", Roboto, sans-serif;
120
- --token-tabActiveBg: rgba(75, 139, 245, 0.1);
121
- --token-tabFocusShadow: 0 0 0 2px rgba(75, 139, 245, 0.2);
122
- --token-tabHoverBg: rgba(255, 255, 255, 0.06);
123
- }
package/dist/styles/themes/bliss-light.css DELETED
@@ -1,123 +0,0 @@
1
- /**
2
- * @lablup/ui-common theme tokens: bliss-light
3
- *
4
- * Overrides for the subset of the 104-token contract (see
5
- * ../base.css) that this theme customizes. Import at most one
6
- * theme file alongside base.css; components never import a
7
- * theme file themselves.
8
- */
9
-
10
- [data-theme="bliss-light"] {
11
- --token-boxShadow: 0 1px 2px rgba(0, 0, 0, 0.1);
12
- --token-boxShadowSecondary: 0 2px 8px rgba(0, 0, 0, 0.15);
13
- --token-buttonActiveTransform: translateY(1px);
14
- --token-buttonBorderRadius: 3px;
15
- --token-buttonDangerBg: linear-gradient(
16
- 180deg,
17
- #e05050 0%,
18
- #c00000 45%,
19
- #a30000 100%
20
- );
21
- --token-buttonDangerBgActive: #a30000;
22
- --token-buttonDangerBgHover: linear-gradient(
23
- 180deg,
24
- #ea6060 0%,
25
- #d01010 45%,
26
- #c00000 100%
27
- );
28
- --token-buttonDangerBorder: 1px solid #8b0000;
29
- --token-buttonDangerShadow:
30
- inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
31
- --token-buttonDangerText: white;
32
- --token-buttonGhostBackdrop: none;
33
- --token-buttonGhostBg: transparent;
34
- --token-buttonGhostBgActive: rgba(36, 94, 220, 0.12);
35
- --token-buttonGhostBgHover: rgba(36, 94, 220, 0.06);
36
- --token-buttonGhostBorder: 1px solid transparent;
37
- --token-buttonGhostBorderHover: 1px solid rgba(36, 94, 220, 0.2);
38
- --token-buttonGhostShadow: none;
39
- --token-buttonGhostShadowHover: none;
40
- --token-buttonHoverTransform: none;
41
- --token-buttonPrimaryBg: linear-gradient(
42
- 180deg,
43
- #4f8fef 0%,
44
- #245edc 45%,
45
- #1b4aaf 100%
46
- );
47
- --token-buttonPrimaryBgHover: linear-gradient(
48
- 180deg,
49
- #6ba3f5 0%,
50
- #3b7aee 45%,
51
- #245edc 100%
52
- );
53
- --token-buttonPrimaryBorder: 1px solid #003ca0;
54
- --token-buttonPrimaryShadow:
55
- inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
56
- --token-buttonPrimaryShadowHover:
57
- inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 3px rgba(0, 0, 0, 0.25);
58
- --token-buttonSecondaryBackdrop: none;
59
- --token-buttonSecondaryBg: linear-gradient(180deg, #ffffff 0%, #ece9d8 100%);
60
- --token-buttonSecondaryBgActive: linear-gradient(
61
- 180deg,
62
- rgba(205, 202, 195, 1) 0%,
63
- rgba(227, 227, 219, 1) 8%,
64
- rgba(229, 229, 222, 1) 94%,
65
- rgba(242, 242, 241, 1) 100%
66
- );
67
- --token-buttonSecondaryBgHover: linear-gradient(180deg, #ffffff 0%, #f1efe2 100%);
68
- --token-buttonSecondaryBorder: 1px solid #aca899;
69
- --token-buttonSecondaryBorderHover: 1px solid #8e8b7a;
70
- --token-buttonSecondaryShadow:
71
- inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 -1px 0 rgba(0, 0, 0, 0.08),
72
- 0 1px 0 rgba(0, 0, 0, 0.05);
73
- --token-buttonSuccessBg: linear-gradient(
74
- 180deg,
75
- #5cad4e 0%,
76
- #3c8d2f 45%,
77
- #2d7a1e 100%
78
- );
79
- --token-buttonSuccessBgHover: linear-gradient(
80
- 180deg,
81
- #6dbd5e 0%,
82
- #4a9d3d 45%,
83
- #3c8d2f 100%
84
- );
85
- --token-buttonSuccessBorder: 1px solid #1f5a14;
86
- --token-buttonSuccessShadow:
87
- inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
88
- --token-colorBgContainer: #ffffff;
89
- --token-colorBgElevated: #ffffff;
90
- --token-colorBgLayout: #ece9d8;
91
- --token-colorBorder: #aca899;
92
- --token-colorBorderSecondary: #d2cfc3;
93
- --token-colorError: #c00000;
94
- --token-colorFillQuaternary: #faf9f5;
95
- --token-colorFillSecondary: #f1efe2;
96
- --token-colorFillTertiary: #f5f3ea;
97
- --token-colorInfo: #245edc;
98
- --token-colorLink: #245edc;
99
- --token-colorPrimary: #245edc;
100
- --token-colorPrimaryActive: #1b4aaf;
101
- --token-colorPrimaryBg: #d6e4f9;
102
- --token-colorPrimaryBorder: rgba(36, 94, 220, 0.25);
103
- --token-colorSuccess: #2d7a1e;
104
- --token-colorSuccessActive: #1f5a14;
105
- --token-colorSuccessBg: rgba(60, 141, 47, 0.06);
106
- --token-colorSuccessBorder: rgba(60, 141, 47, 0.4);
107
- --token-colorSuccessBorderHover: rgba(60, 141, 47, 0.6);
108
- --token-colorSuccessBoxShadow: 0 2px 6px rgba(60, 141, 47, 0.15);
109
- --token-colorText: #000000;
110
- --token-colorTextSecondary: #4d4d4d;
111
- --token-colorTextTertiary: #6e6e6e;
112
- --token-colorWarning: #9a5700;
113
- --token-focusRingColor: #245edc;
114
- --token-focusRingOffset: 2px;
115
- --token-focusRingStyle: solid;
116
- --token-focusRingWidth: 2px;
117
- --token-fontFamily:
118
- "Tahoma", "Gulim", system-ui, -apple-system, BlinkMacSystemFont, "Ubuntu Sans",
119
- "Pretendard Variable", "Segoe UI", Roboto, sans-serif;
120
- --token-tabActiveBg: rgba(36, 94, 220, 0.08);
121
- --token-tabFocusShadow: 0 0 0 2px rgba(36, 94, 220, 0.15);
122
- --token-tabHoverBg: #f1efe2;
123
- }
package/dist/styles/themes/glass-dark.css DELETED
@@ -1,124 +0,0 @@
1
- /**
2
- * @lablup/ui-common theme tokens: glass-dark
3
- *
4
- * Overrides for the subset of the 104-token contract (see
5
- * ../base.css) that this theme customizes. Import at most one
6
- * theme file alongside base.css; components never import a
7
- * theme file themselves.
8
- */
9
-
10
- [data-theme="glass-dark"] {
11
- --token-boxShadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.2);
12
- --token-boxShadowSecondary:
13
- 0 4px 12px 0 rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
14
- --token-buttonActiveTransform: scale(0.97);
15
- --token-buttonBorderRadius: 624.9375rem;
16
- --token-buttonDangerBg:
17
- linear-gradient(
18
- 180deg,
19
- rgba(255, 255, 255, 0.15) 0%,
20
- rgba(255, 255, 255, 0.04) 40%,
21
- transparent 100%
22
- ),
23
- #ff453a;
24
- --token-buttonDangerBgActive: #e03e35;
25
- --token-buttonDangerBgHover:
26
- linear-gradient(
27
- 180deg,
28
- rgba(255, 255, 255, 0.2) 0%,
29
- rgba(255, 255, 255, 0.05) 40%,
30
- transparent 100%
31
- ),
32
- #ff5c54;
33
- --token-buttonDangerBorder: 1px solid rgba(255, 255, 255, 0.1);
34
- --token-buttonDangerShadow: 0 1px 3px rgba(255, 69, 58, 0.25);
35
- --token-buttonDangerText: white;
36
- --token-buttonGhostBackdrop: none;
37
- --token-buttonGhostBg: transparent;
38
- --token-buttonGhostBgActive: rgba(255, 255, 255, 0.12);
39
- --token-buttonGhostBgHover: rgba(255, 255, 255, 0.08);
40
- --token-buttonGhostBorder: 1px solid transparent;
41
- --token-buttonGhostBorderHover: 1px solid rgba(255, 255, 255, 0.06);
42
- --token-buttonGhostShadow: none;
43
- --token-buttonGhostShadowHover: none;
44
- --token-buttonHoverTransform: translateY(-1px);
45
- --token-buttonPrimaryBg:
46
- linear-gradient(
47
- 180deg,
48
- rgba(255, 255, 255, 0.15) 0%,
49
- rgba(255, 255, 255, 0.04) 40%,
50
- transparent 100%
51
- ),
52
- var(--token-colorPrimary);
53
- --token-buttonPrimaryBgHover:
54
- linear-gradient(
55
- 180deg,
56
- rgba(255, 255, 255, 0.2) 0%,
57
- rgba(255, 255, 255, 0.05) 40%,
58
- transparent 100%
59
- ),
60
- #409cff;
61
- --token-buttonPrimaryBorder: 1px solid rgba(255, 255, 255, 0.1);
62
- --token-buttonPrimaryShadow: 0 1px 3px rgba(10, 132, 255, 0.25);
63
- --token-buttonPrimaryShadowHover: 0 3px 8px rgba(10, 132, 255, 0.35);
64
- --token-buttonSecondaryBackdrop: blur(12px);
65
- --token-buttonSecondaryBg: rgba(255, 255, 255, 0.1);
66
- --token-buttonSecondaryBgActive: rgba(255, 255, 255, 0.18);
67
- --token-buttonSecondaryBgHover: rgba(255, 255, 255, 0.14);
68
- --token-buttonSecondaryBorder: 1px solid rgba(255, 255, 255, 0.08);
69
- --token-buttonSecondaryBorderHover: 1px solid rgba(255, 255, 255, 0.12);
70
- --token-buttonSecondaryShadow: 0 1px 2px rgba(0, 0, 0, 0.15);
71
- --token-buttonSuccessBg:
72
- linear-gradient(
73
- 180deg,
74
- rgba(255, 255, 255, 0.15) 0%,
75
- rgba(255, 255, 255, 0.04) 40%,
76
- transparent 100%
77
- ),
78
- var(--token-colorSuccess);
79
- --token-buttonSuccessBgHover:
80
- linear-gradient(
81
- 180deg,
82
- rgba(255, 255, 255, 0.2) 0%,
83
- rgba(255, 255, 255, 0.05) 40%,
84
- transparent 100%
85
- ),
86
- #30db75;
87
- --token-buttonSuccessBorder: 1px solid rgba(255, 255, 255, 0.1);
88
- --token-buttonSuccessShadow: 0 1px 3px rgba(50, 215, 75, 0.25);
89
- --token-colorBgContainer: rgba(28, 28, 30, 0.92);
90
- --token-colorBgElevated: rgba(44, 44, 46, 0.95);
91
- --token-colorBgLayout: rgba(0, 0, 0, 0.95);
92
- --token-colorBorder: rgba(255, 255, 255, 0.1);
93
- --token-colorBorderSecondary: rgba(255, 255, 255, 0.06);
94
- --token-colorError: #ff453a;
95
- --token-colorFillQuaternary: rgba(116, 116, 128, 0.08);
96
- --token-colorFillSecondary: rgba(120, 120, 128, 0.16);
97
- --token-colorFillTertiary: rgba(118, 118, 128, 0.12);
98
- --token-colorInfo: #0a84ff;
99
- --token-colorLink: #0a84ff;
100
- --token-colorPrimary: #0a84ff;
101
- --token-colorPrimaryActive: #0062cc;
102
- --token-colorPrimaryBg: rgba(10, 132, 255, 0.12);
103
- --token-colorPrimaryBorder: rgba(10, 132, 255, 0.3);
104
- --token-colorSuccess: #32d74b;
105
- --token-colorSuccessActive: #30e078;
106
- --token-colorSuccessBg: rgba(50, 215, 75, 0.15);
107
- --token-colorSuccessBorder: rgba(50, 215, 75, 0.4);
108
- --token-colorSuccessBorderHover: rgba(50, 215, 75, 0.6);
109
- --token-colorSuccessBoxShadow: 0 4px 12px rgba(50, 215, 75, 0.2);
110
- --token-colorText: #f5f5f7;
111
- --token-colorTextSecondary: #b8b8bc;
112
- --token-colorTextTertiary: #98989d;
113
- --token-colorWarning: #ff9f0a;
114
- --token-focusRingColor: #409cff;
115
- --token-focusRingOffset: 2px;
116
- --token-focusRingStyle: solid;
117
- --token-focusRingWidth: 2px;
118
- --token-fontFamily:
119
- system-ui, -apple-system, BlinkMacSystemFont, "Ubuntu Sans", "Pretendard Variable",
120
- "Segoe UI", Roboto, sans-serif;
121
- --token-tabActiveBg: rgba(10, 132, 255, 0.1);
122
- --token-tabFocusShadow: 0 0 0 3px rgba(10, 132, 255, 0.2);
123
- --token-tabHoverBg: rgba(120, 120, 128, 0.16);
124
- }
package/dist/styles/themes/glass-light.css DELETED
@@ -1,125 +0,0 @@
1
- /**
2
- * @lablup/ui-common theme tokens: glass-light
3
- *
4
- * Overrides for the subset of the 104-token contract (see
5
- * ../base.css) that this theme customizes. Import at most one
6
- * theme file alongside base.css; components never import a
7
- * theme file themselves.
8
- */
9
-
10
- [data-theme="glass-light"] {
11
- --token-boxShadow:
12
- 0 1px 3px 0 rgba(0, 0, 0, 0.04), 0 1px 2px -1px rgba(0, 0, 0, 0.02);
13
- --token-boxShadowSecondary:
14
- 0 4px 12px 0 rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
15
- --token-buttonActiveTransform: scale(0.97);
16
- --token-buttonBorderRadius: 624.9375rem;
17
- --token-buttonDangerBg:
18
- linear-gradient(
19
- 180deg,
20
- rgba(255, 255, 255, 0.18) 0%,
21
- rgba(255, 255, 255, 0.05) 40%,
22
- transparent 100%
23
- ),
24
- #ff3b30;
25
- --token-buttonDangerBgActive: #c22d26;
26
- --token-buttonDangerBgHover:
27
- linear-gradient(
28
- 180deg,
29
- rgba(255, 255, 255, 0.22) 0%,
30
- rgba(255, 255, 255, 0.06) 40%,
31
- transparent 100%
32
- ),
33
- #e0342b;
34
- --token-buttonDangerBorder: 1px solid rgba(255, 255, 255, 0.15);
35
- --token-buttonDangerShadow: 0 1px 3px rgba(255, 59, 48, 0.2);
36
- --token-buttonDangerText: white;
37
- --token-buttonGhostBackdrop: none;
38
- --token-buttonGhostBg: transparent;
39
- --token-buttonGhostBgActive: rgba(142, 142, 147, 0.16);
40
- --token-buttonGhostBgHover: rgba(142, 142, 147, 0.1);
41
- --token-buttonGhostBorder: 1px solid transparent;
42
- --token-buttonGhostBorderHover: 1px solid rgba(0, 0, 0, 0.04);
43
- --token-buttonGhostShadow: none;
44
- --token-buttonGhostShadowHover: none;
45
- --token-buttonHoverTransform: translateY(-1px);
46
- --token-buttonPrimaryBg:
47
- linear-gradient(
48
- 180deg,
49
- rgba(255, 255, 255, 0.18) 0%,
50
- rgba(255, 255, 255, 0.05) 40%,
51
- transparent 100%
52
- ),
53
- var(--token-colorPrimary);
54
- --token-buttonPrimaryBgHover:
55
- linear-gradient(
56
- 180deg,
57
- rgba(255, 255, 255, 0.22) 0%,
58
- rgba(255, 255, 255, 0.06) 40%,
59
- transparent 100%
60
- ),
61
- #0062cc;
62
- --token-buttonPrimaryBorder: 1px solid rgba(255, 255, 255, 0.15);
63
- --token-buttonPrimaryShadow: 0 1px 3px rgba(0, 122, 255, 0.2);
64
- --token-buttonPrimaryShadowHover: 0 3px 8px rgba(0, 122, 255, 0.25);
65
- --token-buttonSecondaryBackdrop: blur(12px);
66
- --token-buttonSecondaryBg: rgba(142, 142, 147, 0.12);
67
- --token-buttonSecondaryBgActive: rgba(142, 142, 147, 0.24);
68
- --token-buttonSecondaryBgHover: rgba(142, 142, 147, 0.18);
69
- --token-buttonSecondaryBorder: 1px solid rgba(0, 0, 0, 0.04);
70
- --token-buttonSecondaryBorderHover: 1px solid rgba(0, 0, 0, 0.06);
71
- --token-buttonSecondaryShadow: 0 1px 2px rgba(0, 0, 0, 0.04);
72
- --token-buttonSuccessBg:
73
- linear-gradient(
74
- 180deg,
75
- rgba(255, 255, 255, 0.18) 0%,
76
- rgba(255, 255, 255, 0.05) 40%,
77
- transparent 100%
78
- ),
79
- var(--token-colorSuccess);
80
- --token-buttonSuccessBgHover:
81
- linear-gradient(
82
- 180deg,
83
- rgba(255, 255, 255, 0.22) 0%,
84
- rgba(255, 255, 255, 0.06) 40%,
85
- transparent 100%
86
- ),
87
- #1a6d3b;
88
- --token-buttonSuccessBorder: 1px solid rgba(255, 255, 255, 0.15);
89
- --token-buttonSuccessShadow: 0 1px 3px rgba(52, 199, 89, 0.2);
90
- --token-colorBgContainer: rgba(255, 255, 255, 0.92);
91
- --token-colorBgElevated: rgba(255, 255, 255, 0.95);
92
- --token-colorBgLayout: rgba(242, 242, 247, 0.95);
93
- --token-colorBorder: rgba(0, 0, 0, 0.08);
94
- --token-colorBorderSecondary: rgba(0, 0, 0, 0.05);
95
- --token-colorError: #c22d26;
96
- --token-colorFillQuaternary: rgba(116, 116, 128, 0.04);
97
- --token-colorFillSecondary: rgba(120, 120, 128, 0.08);
98
- --token-colorFillTertiary: rgba(118, 118, 128, 0.06);
99
- --token-colorInfo: #005eb8;
100
- --token-colorLink: #007aff;
101
- --token-colorPrimary: #007aff;
102
- --token-colorPrimaryActive: #004999;
103
- --token-colorPrimaryBg: rgba(0, 122, 255, 0.08);
104
- --token-colorPrimaryBorder: rgba(0, 122, 255, 0.2);
105
- --token-colorSuccess: #1d7d43;
106
- --token-colorSuccessActive: #165c33;
107
- --token-colorSuccessBg: rgba(52, 199, 89, 0.05);
108
- --token-colorSuccessBorder: rgba(52, 199, 89, 0.4);
109
- --token-colorSuccessBorderHover: rgba(52, 199, 89, 0.6);
110
- --token-colorSuccessBoxShadow: 0 4px 12px rgba(52, 199, 89, 0.15);
111
- --token-colorText: #1d1d1f;
112
- --token-colorTextSecondary: #545458;
113
- --token-colorTextTertiary: #6e6e73;
114
- --token-colorWarning: #9a5700;
115
- --token-focusRingColor: #007aff;
116
- --token-focusRingOffset: 2px;
117
- --token-focusRingStyle: solid;
118
- --token-focusRingWidth: 2px;
119
- --token-fontFamily:
120
- system-ui, -apple-system, BlinkMacSystemFont, "Ubuntu Sans", "Pretendard Variable",
121
- "Segoe UI", Roboto, sans-serif;
122
- --token-tabActiveBg: rgba(0, 122, 255, 0.08);
123
- --token-tabFocusShadow: 0 0 0 3px rgba(0, 122, 255, 0.12);
124
- --token-tabHoverBg: rgba(120, 120, 128, 0.08);
125
- }
package/dist/styles/themes/reverie-dark.css DELETED
@@ -1,104 +0,0 @@
1
- /**
2
- * @lablup/ui-common theme tokens: reverie-dark
3
- *
4
- * Overrides for the subset of the 104-token contract (see
5
- * ../base.css) that this theme customizes. Import at most one
6
- * theme file alongside base.css; components never import a
7
- * theme file themselves.
8
- */
9
-
10
- [data-theme="reverie-dark"] {
11
- --token-boxShadow:
12
- 0 1px 2px 0 rgba(0, 0, 0, 0.15), 0 1px 6px -1px rgba(0, 0, 0, 0.1),
13
- 0 2px 4px 0 rgba(0, 0, 0, 0.1);
14
- --token-boxShadowSecondary:
15
- 0 6px 16px 0 rgba(0, 0, 0, 0.2), 0 3px 6px -4px rgba(0, 0, 0, 0.24),
16
- 0 9px 28px 8px rgba(0, 0, 0, 0.15);
17
- --token-buttonGhostBackdrop: none;
18
- --token-buttonGhostBg: rgba(253, 164, 175, 0.04);
19
- --token-buttonGhostBgHover: rgba(253, 164, 175, 0.1);
20
- --token-buttonGhostBorder: 1px solid transparent;
21
- --token-buttonGhostShadow: none;
22
- --token-buttonGhostShadowHover: 0 0 14px rgba(253, 164, 175, 0.1);
23
- --token-buttonPrimaryBg:
24
- linear-gradient(
25
- 180deg,
26
- rgba(255, 255, 255, 0.2) 0%,
27
- rgba(255, 255, 255, 0.03) 50%,
28
- transparent 100%
29
- ),
30
- var(--token-colorPrimary);
31
- --token-buttonPrimaryBgHover:
32
- linear-gradient(
33
- 180deg,
34
- rgba(255, 255, 255, 0.3) 0%,
35
- rgba(255, 255, 255, 0.06) 50%,
36
- transparent 100%
37
- ),
38
- #fb7185;
39
- --token-buttonPrimaryBorder: 1px solid rgba(255, 255, 255, 0.15);
40
- --token-buttonPrimaryShadow:
41
- 0 2px 8px rgba(253, 164, 175, 0.35), 0 0 20px rgba(253, 164, 175, 0.12),
42
- inset 0 1px 1px rgba(255, 255, 255, 0.2);
43
- --token-buttonPrimaryShadowHover:
44
- 0 4px 14px rgba(253, 164, 175, 0.45), 0 0 24px rgba(253, 164, 175, 0.18),
45
- inset 0 1px 1px rgba(255, 255, 255, 0.25);
46
- --token-buttonSecondaryBackdrop: blur(4px);
47
- --token-buttonSecondaryBg: rgba(253, 164, 175, 0.08);
48
- --token-buttonSecondaryBgHover: rgba(253, 164, 175, 0.14);
49
- --token-buttonSecondaryBorder: 1px solid rgba(253, 164, 175, 0.2);
50
- --token-buttonSecondaryBorderHover: 1px solid rgba(253, 164, 175, 0.35);
51
- --token-buttonSecondaryShadow:
52
- 0 1px 4px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.05);
53
- --token-buttonSuccessBg:
54
- linear-gradient(
55
- 180deg,
56
- rgba(255, 255, 255, 0.2) 0%,
57
- rgba(255, 255, 255, 0.03) 50%,
58
- transparent 100%
59
- ),
60
- var(--token-colorSuccess);
61
- --token-buttonSuccessBgHover:
62
- linear-gradient(
63
- 180deg,
64
- rgba(255, 255, 255, 0.3) 0%,
65
- rgba(255, 255, 255, 0.06) 50%,
66
- transparent 100%
67
- ),
68
- #04b898;
69
- --token-buttonSuccessBorder: 1px solid rgba(255, 255, 255, 0.15);
70
- --token-buttonSuccessShadow:
71
- 0 2px 8px rgba(3, 164, 135, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.2);
72
- --token-colorBgContainer: #1f1f1f;
73
- --token-colorBgElevated: #262626;
74
- --token-colorBgLayout: #121212;
75
- --token-colorBorder: #424242;
76
- --token-colorBorderSecondary: #303030;
77
- --token-colorError: #dc4446;
78
- --token-colorFillQuaternary: rgba(255, 255, 255, 0.04);
79
- --token-colorFillSecondary: #262626;
80
- --token-colorFillTertiary: #1a1a1a;
81
- --token-colorInfo: #009bdd;
82
- --token-colorLink: #fda4af;
83
- --token-colorPrimary: #fda4af;
84
- --token-colorPrimaryActive: #f43f5e;
85
- --token-colorPrimaryBg: rgba(253, 164, 175, 0.12);
86
- --token-colorPrimaryBorder: rgba(253, 164, 175, 0.25);
87
- --token-colorSuccess: #03a487;
88
- --token-colorSuccessActive: #05cca8;
89
- --token-colorSuccessBg: rgba(3, 164, 135, 0.15);
90
- --token-colorSuccessBorder: rgba(3, 164, 135, 0.4);
91
- --token-colorSuccessBorderHover: rgba(3, 164, 135, 0.6);
92
- --token-colorSuccessBoxShadow: 0 4px 12px rgba(3, 164, 135, 0.2);
93
- --token-colorText: #ffffff;
94
- --token-colorTextSecondary: #b3b3b3;
95
- --token-colorTextTertiary: #8c8c8c;
96
- --token-colorWarning: #d89614;
97
- --token-focusRingColor: #fda4af;
98
- --token-focusRingOffset: 2px;
99
- --token-focusRingStyle: solid;
100
- --token-focusRingWidth: 2px;
101
- --token-tabActiveBg: rgba(253, 164, 175, 0.1);
102
- --token-tabFocusShadow: 0 0 0 3px rgba(253, 164, 175, 0.2);
103
- --token-tabHoverBg: rgba(255, 255, 255, 0.05);
104
- }
package/dist/styles/themes/reverie-light.css DELETED
@@ -1,104 +0,0 @@
1
- /**
2
- * @lablup/ui-common theme tokens: reverie-light
3
- *
4
- * Overrides for the subset of the 104-token contract (see
5
- * ../base.css) that this theme customizes. Import at most one
6
- * theme file alongside base.css; components never import a
7
- * theme file themselves.
8
- */
9
-
10
- [data-theme="reverie-light"] {
11
- --token-boxShadow:
12
- 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02),
13
- 0 2px 4px 0 rgba(0, 0, 0, 0.02);
14
- --token-boxShadowSecondary:
15
- 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12),
16
- 0 9px 28px 8px rgba(0, 0, 0, 0.05);
17
- --token-buttonGhostBackdrop: none;
18
- --token-buttonGhostBg: rgba(251, 113, 133, 0.03);
19
- --token-buttonGhostBgHover: rgba(251, 113, 133, 0.08);
20
- --token-buttonGhostBorder: 1px solid transparent;
21
- --token-buttonGhostShadow: none;
22
- --token-buttonGhostShadowHover: 0 0 12px rgba(251, 113, 133, 0.08);
23
- --token-buttonPrimaryBg:
24
- linear-gradient(
25
- 180deg,
26
- rgba(255, 255, 255, 0.3) 0%,
27
- rgba(255, 255, 255, 0.05) 50%,
28
- transparent 100%
29
- ),
30
- var(--token-colorPrimary);
31
- --token-buttonPrimaryBgHover:
32
- linear-gradient(
33
- 180deg,
34
- rgba(255, 255, 255, 0.4) 0%,
35
- rgba(255, 255, 255, 0.1) 50%,
36
- transparent 100%
37
- ),
38
- #f43f5e;
39
- --token-buttonPrimaryBorder: 1px solid rgba(255, 255, 255, 0.25);
40
- --token-buttonPrimaryShadow:
41
- 0 2px 8px rgba(251, 113, 133, 0.3), 0 0 16px rgba(251, 113, 133, 0.1),
42
- inset 0 1px 1px rgba(255, 255, 255, 0.3);
43
- --token-buttonPrimaryShadowHover:
44
- 0 4px 12px rgba(251, 113, 133, 0.4), 0 0 20px rgba(251, 113, 133, 0.15),
45
- inset 0 1px 1px rgba(255, 255, 255, 0.4);
46
- --token-buttonSecondaryBackdrop: blur(4px);
47
- --token-buttonSecondaryBg: rgba(251, 113, 133, 0.06);
48
- --token-buttonSecondaryBgHover: rgba(251, 113, 133, 0.1);
49
- --token-buttonSecondaryBorder: 1px solid rgba(251, 113, 133, 0.2);
50
- --token-buttonSecondaryBorderHover: 1px solid rgba(251, 113, 133, 0.35);
51
- --token-buttonSecondaryShadow:
52
- 0 1px 4px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.7);
53
- --token-buttonSuccessBg:
54
- linear-gradient(
55
- 180deg,
56
- rgba(255, 255, 255, 0.3) 0%,
57
- rgba(255, 255, 255, 0.05) 50%,
58
- transparent 100%
59
- ),
60
- var(--token-colorSuccess);
61
- --token-buttonSuccessBgHover:
62
- linear-gradient(
63
- 180deg,
64
- rgba(255, 255, 255, 0.4) 0%,
65
- rgba(255, 255, 255, 0.1) 50%,
66
- transparent 100%
67
- ),
68
- #006654;
69
- --token-buttonSuccessBorder: 1px solid rgba(255, 255, 255, 0.25);
70
- --token-buttonSuccessShadow:
71
- 0 2px 8px rgba(0, 189, 155, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.3);
72
- --token-colorBgContainer: #ffffff;
73
- --token-colorBgElevated: #ffffff;
74
- --token-colorBgLayout: #f5f5f5;
75
- --token-colorBorder: #d9d9d9;
76
- --token-colorBorderSecondary: #e5e7eb;
77
- --token-colorError: #c82333;
78
- --token-colorFillQuaternary: #fafafa;
79
- --token-colorFillSecondary: #f3f4f6;
80
- --token-colorFillTertiary: #f9fafb;
81
- --token-colorInfo: #0066cc;
82
- --token-colorLink: #fb7185;
83
- --token-colorPrimary: #fb7185;
84
- --token-colorPrimaryActive: #e11d48;
85
- --token-colorPrimaryBg: rgba(251, 113, 133, 0.1);
86
- --token-colorPrimaryBorder: rgba(251, 113, 133, 0.2);
87
- --token-colorSuccess: #007a63;
88
- --token-colorSuccessActive: #005244;
89
- --token-colorSuccessBg: rgba(0, 189, 155, 0.05);
90
- --token-colorSuccessBorder: rgba(0, 189, 155, 0.4);
91
- --token-colorSuccessBorderHover: rgba(0, 189, 155, 0.6);
92
- --token-colorSuccessBoxShadow: 0 4px 12px rgba(0, 189, 155, 0.15);
93
- --token-colorText: #141414;
94
- --token-colorTextSecondary: #595959;
95
- --token-colorTextTertiary: #737373;
96
- --token-colorWarning: #9a5d00;
97
- --token-focusRingColor: #fb7185;
98
- --token-focusRingOffset: 2px;
99
- --token-focusRingStyle: solid;
100
- --token-focusRingWidth: 2px;
101
- --token-tabActiveBg: rgba(251, 113, 133, 0.1);
102
- --token-tabFocusShadow: 0 0 0 3px rgba(251, 113, 133, 0.15);
103
- --token-tabHoverBg: var(--token-colorFillSecondary);
104
- }
package/dist/styles/themes/stained-dark.css DELETED
@@ -1,80 +0,0 @@
1
- /**
2
- * @lablup/ui-common theme tokens: stained-dark
3
- *
4
- * Overrides for the subset of the 104-token contract (see
5
- * ../base.css) that this theme customizes. Import at most one
6
- * theme file alongside base.css; components never import a
7
- * theme file themselves.
8
- */
9
-
10
- [data-theme="stained-dark"] {
11
- --token-boxShadow:
12
- 0 1px 2px 0 rgba(0, 0, 0, 0.15), 0 1px 6px -1px rgba(0, 0, 0, 0.1),
13
- 0 2px 4px 0 rgba(0, 0, 0, 0.1);
14
- --token-boxShadowSecondary:
15
- 0 6px 16px 0 rgba(0, 0, 0, 0.2), 0 3px 6px -4px rgba(0, 0, 0, 0.24),
16
- 0 9px 28px 8px rgba(0, 0, 0, 0.15);
17
- --token-buttonGhostBackdrop: none;
18
- --token-buttonGhostBg: transparent;
19
- --token-buttonGhostBgHover: rgba(167, 139, 250, 0.1);
20
- --token-buttonGhostBorder: 1px solid transparent;
21
- --token-buttonGhostShadow: none;
22
- --token-buttonGhostShadowHover: none;
23
- --token-buttonPrimaryBg:
24
- linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, transparent 50%),
25
- var(--token-colorPrimary);
26
- --token-buttonPrimaryBgHover:
27
- linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, transparent 50%), #9575fa;
28
- --token-buttonPrimaryBorder: none;
29
- --token-buttonPrimaryShadow:
30
- 0 2px 8px rgba(167, 139, 250, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.15);
31
- --token-buttonPrimaryShadowHover:
32
- 0 4px 12px rgba(167, 139, 250, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.2);
33
- --token-buttonSecondaryBackdrop: none;
34
- --token-buttonSecondaryBg: rgba(167, 139, 250, 0.08);
35
- --token-buttonSecondaryBgHover: rgba(167, 139, 250, 0.12);
36
- --token-buttonSecondaryBorder: 1px solid rgba(167, 139, 250, 0.2);
37
- --token-buttonSecondaryBorderHover: 1px solid rgba(167, 139, 250, 0.3);
38
- --token-buttonSecondaryShadow:
39
- 0 1px 3px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.05);
40
- --token-buttonSuccessBg:
41
- linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, transparent 50%),
42
- var(--token-colorSuccess);
43
- --token-buttonSuccessBgHover:
44
- linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, transparent 50%), #04b898;
45
- --token-buttonSuccessBorder: none;
46
- --token-buttonSuccessShadow:
47
- 0 2px 8px rgba(3, 164, 135, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.15);
48
- --token-colorBgContainer: #1f1f1f;
49
- --token-colorBgElevated: #262626;
50
- --token-colorBgLayout: #121212;
51
- --token-colorBorder: #424242;
52
- --token-colorBorderSecondary: #303030;
53
- --token-colorError: #dc4446;
54
- --token-colorFillQuaternary: rgba(255, 255, 255, 0.04);
55
- --token-colorFillSecondary: #262626;
56
- --token-colorFillTertiary: #1a1a1a;
57
- --token-colorInfo: #009bdd;
58
- --token-colorLink: #a78bfa;
59
- --token-colorPrimary: #a78bfa;
60
- --token-colorPrimaryActive: #8b5cf6;
61
- --token-colorPrimaryBg: rgba(167, 139, 250, 0.12);
62
- --token-colorPrimaryBorder: rgba(167, 139, 250, 0.25);
63
- --token-colorSuccess: #03a487;
64
- --token-colorSuccessActive: #05cca8;
65
- --token-colorSuccessBg: rgba(3, 164, 135, 0.15);
66
- --token-colorSuccessBorder: rgba(3, 164, 135, 0.4);
67
- --token-colorSuccessBorderHover: rgba(3, 164, 135, 0.6);
68
- --token-colorSuccessBoxShadow: 0 4px 12px rgba(3, 164, 135, 0.2);
69
- --token-colorText: #ffffff;
70
- --token-colorTextSecondary: #b3b3b3;
71
- --token-colorTextTertiary: #8c8c8c;
72
- --token-colorWarning: #d89614;
73
- --token-focusRingColor: #a78bfa;
74
- --token-focusRingOffset: 2px;
75
- --token-focusRingStyle: solid;
76
- --token-focusRingWidth: 2px;
77
- --token-tabActiveBg: rgba(167, 139, 250, 0.1);
78
- --token-tabFocusShadow: 0 0 0 3px rgba(167, 139, 250, 0.2);
79
- --token-tabHoverBg: rgba(255, 255, 255, 0.05);
80
- }
package/dist/styles/themes/stained-light.css DELETED
@@ -1,80 +0,0 @@
1
- /**
2
- * @lablup/ui-common theme tokens: stained-light
3
- *
4
- * Overrides for the subset of the 104-token contract (see
5
- * ../base.css) that this theme customizes. Import at most one
6
- * theme file alongside base.css; components never import a
7
- * theme file themselves.
8
- */
9
-
10
- [data-theme="stained-light"] {
11
- --token-boxShadow:
12
- 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02),
13
- 0 2px 4px 0 rgba(0, 0, 0, 0.02);
14
- --token-boxShadowSecondary:
15
- 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12),
16
- 0 9px 28px 8px rgba(0, 0, 0, 0.05);
17
- --token-buttonGhostBackdrop: none;
18
- --token-buttonGhostBg: transparent;
19
- --token-buttonGhostBgHover: rgba(139, 92, 246, 0.06);
20
- --token-buttonGhostBorder: 1px solid transparent;
21
- --token-buttonGhostShadow: none;
22
- --token-buttonGhostShadowHover: none;
23
- --token-buttonPrimaryBg:
24
- linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, transparent 50%),
25
- var(--token-colorPrimary);
26
- --token-buttonPrimaryBgHover:
27
- linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, transparent 50%), #7c3aed;
28
- --token-buttonPrimaryBorder: none;
29
- --token-buttonPrimaryShadow:
30
- 0 2px 6px rgba(139, 92, 246, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.2);
31
- --token-buttonPrimaryShadowHover:
32
- 0 4px 10px rgba(139, 92, 246, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.25);
33
- --token-buttonSecondaryBackdrop: none;
34
- --token-buttonSecondaryBg: rgba(139, 92, 246, 0.04);
35
- --token-buttonSecondaryBgHover: rgba(139, 92, 246, 0.08);
36
- --token-buttonSecondaryBorder: 1px solid rgba(139, 92, 246, 0.2);
37
- --token-buttonSecondaryBorderHover: 1px solid rgba(139, 92, 246, 0.3);
38
- --token-buttonSecondaryShadow:
39
- 0 1px 3px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.8);
40
- --token-buttonSuccessBg:
41
- linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, transparent 50%),
42
- var(--token-colorSuccess);
43
- --token-buttonSuccessBgHover:
44
- linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, transparent 50%), #006654;
45
- --token-buttonSuccessBorder: none;
46
- --token-buttonSuccessShadow:
47
- 0 2px 6px rgba(0, 189, 155, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.2);
48
- --token-colorBgContainer: #ffffff;
49
- --token-colorBgElevated: #ffffff;
50
- --token-colorBgLayout: #f5f5f5;
51
- --token-colorBorder: #d9d9d9;
52
- --token-colorBorderSecondary: #e5e7eb;
53
- --token-colorError: #c82333;
54
- --token-colorFillQuaternary: #fafafa;
55
- --token-colorFillSecondary: #f3f4f6;
56
- --token-colorFillTertiary: #f9fafb;
57
- --token-colorInfo: #0066cc;
58
- --token-colorLink: #8b5cf6;
59
- --token-colorPrimary: #8b5cf6;
60
- --token-colorPrimaryActive: #6d28d9;
61
- --token-colorPrimaryBg: rgba(139, 92, 246, 0.1);
62
- --token-colorPrimaryBorder: rgba(139, 92, 246, 0.2);
63
- --token-colorSuccess: #007a63;
64
- --token-colorSuccessActive: #005244;
65
- --token-colorSuccessBg: rgba(0, 189, 155, 0.05);
66
- --token-colorSuccessBorder: rgba(0, 189, 155, 0.4);
67
- --token-colorSuccessBorderHover: rgba(0, 189, 155, 0.6);
68
- --token-colorSuccessBoxShadow: 0 4px 12px rgba(0, 189, 155, 0.15);
69
- --token-colorText: #141414;
70
- --token-colorTextSecondary: #595959;
71
- --token-colorTextTertiary: #737373;
72
- --token-colorWarning: #9a5d00;
73
- --token-focusRingColor: #8b5cf6;
74
- --token-focusRingOffset: 2px;
75
- --token-focusRingStyle: solid;
76
- --token-focusRingWidth: 2px;
77
- --token-tabActiveBg: rgba(139, 92, 246, 0.1);
78
- --token-tabFocusShadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
79
- --token-tabHoverBg: var(--token-colorFillSecondary);
80
- }