@tqc-solution/design-system 0.1.79 → 0.1.80

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 (8) hide show
  1. package/README.md +25 -23
  2. package/dist/css/{pubfuture.css → pubstar.css} +37 -38
  3. package/dist/index.cjs.js +1 -1
  4. package/dist/index.es.js +1 -1
  5. package/dist/tailwind/index.js +2 -2
  6. package/dist/tailwind/{pubfuture.preset.js → pubstar.preset.js} +4 -5
  7. package/package.json +4 -2
  8. /package/dist/tailwind/{pubfuture.preset.d.ts → pubstar.preset.d.ts} +0 -0
package/README.md CHANGED
@@ -4,7 +4,7 @@ A production-ready React Design System with **multi-theme support**, **CSS varia
4
4
 
5
5
  ## Features
6
6
 
7
- - 🎨 **Multi-theme support** - PubFuture and OIO themes
7
+ - 🎨 **Multi-theme support** - PubFuture, PubStar, and OIO themes
8
8
  - 🎯 **CSS Variables** - All design tokens exposed as CSS variables
9
9
  - ⚡ **Tailwind Preset** - Seamless Tailwind CSS integration
10
10
  - 📦 **Auto-injected CSS** - No manual CSS imports needed
@@ -23,6 +23,12 @@ Install the package with your preferred theme tag:
23
23
  npm i @tqc-solution/design-system@pubfuture
24
24
  ```
25
25
 
26
+ ### PubStar Theme
27
+
28
+ ```bash
29
+ npm i @tqc-solution/design-system@pubstar
30
+ ```
31
+
26
32
  ### OIO Theme
27
33
 
28
34
  ```bash
@@ -37,7 +43,7 @@ All theme CSS is **automatically injected** into your bundle, so **no manual CSS
37
43
 
38
44
  ```tsx
39
45
  // App.tsx
40
- import { Button } from '@tqc-solution/design-system';
46
+ import { Button } from "@tqc-solution/design-system";
41
47
 
42
48
  function App() {
43
49
  return (
@@ -59,7 +65,7 @@ A versatile button component with multiple variants and sizes.
59
65
  #### Import
60
66
 
61
67
  ```tsx
62
- import { Button } from '@tqc-solution/design-system';
68
+ import { Button } from "@tqc-solution/design-system";
63
69
  ```
64
70
 
65
71
  #### Usage Examples
@@ -86,15 +92,15 @@ import { Button } from '@tqc-solution/design-system';
86
92
 
87
93
  #### Props
88
94
 
89
- | Prop | Type | Default | Description |
90
- |------|------|---------|-------------|
91
- | `label` | `string` | - | Button text label |
92
- | `variant` | `'primary' \| 'secondary' \| 'text' \| 'link' \| 'negative-primary' \| 'negative-secondary'` | `'primary'` | Button style variant |
93
- | `size` | `'large' \| 'medium' \| 'full'` | `'large'` | Button size |
94
- | `startIcon` | `ReactNode` | - | Icon displayed at the start of the button |
95
- | `endIcon` | `ReactNode` | - | Icon displayed at the end of the button |
96
- | `href` | `string` | - | Only used when `variant="link"` |
97
- | `disabled` | `boolean` | `false` | Disabled state |
95
+ | Prop | Type | Default | Description |
96
+ | ----------- | -------------------------------------------------------------------------------------------- | ----------- | ----------------------------------------- |
97
+ | `label` | `string` | - | Button text label |
98
+ | `variant` | `'primary' \| 'secondary' \| 'text' \| 'link' \| 'negative-primary' \| 'negative-secondary'` | `'primary'` | Button style variant |
99
+ | `size` | `'large' \| 'medium' \| 'full'` | `'large'` | Button size |
100
+ | `startIcon` | `ReactNode` | - | Icon displayed at the start of the button |
101
+ | `endIcon` | `ReactNode` | - | Icon displayed at the end of the button |
102
+ | `href` | `string` | - | Only used when `variant="link"` |
103
+ | `disabled` | `boolean` | `false` | Disabled state |
98
104
 
99
105
  ---
100
106
 
@@ -106,8 +112,8 @@ The Design System exposes all **design tokens** as CSS variables on `:root`, mak
106
112
 
107
113
  ```css
108
114
  :root {
109
- --background-fill-negative: #E84118;
110
- --background-fill-brand: #3FAE3B;
115
+ --background-fill-negative: #e84118;
116
+ --background-fill-brand: #3fae3b;
111
117
  --text-primary: #000000;
112
118
  --spacing-16: 16px;
113
119
  --radius-8: 8px;
@@ -143,21 +149,19 @@ The package provides a **Tailwind preset** for each theme, allowing you to use d
143
149
  ### Theme Mapping
144
150
 
145
151
  - `@tqc-solution/design-system@pubfuture` → PubFuture preset
152
+ - `@tqc-solution/design-system@pubstar` → PubStar preset
146
153
  - `@tqc-solution/design-system@oio` → OIO preset
147
154
 
148
155
  ### Configuration
149
156
 
150
157
  ```js
151
158
  // tailwind.config.js
152
- import tqcPreset from '@tqc-solution/design-system/tailwind';
159
+ import tqcPreset from "@tqc-solution/design-system/tailwind";
153
160
 
154
161
  /** @type {import('tailwindcss').Config} */
155
162
  export default {
156
163
  presets: [tqcPreset],
157
- content: [
158
- './index.html',
159
- './src/**/*.{js,ts,jsx,tsx}',
160
- ],
164
+ content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
161
165
  theme: {
162
166
  extend: {
163
167
  // You can add custom theme extensions here
@@ -171,14 +175,12 @@ export default {
171
175
 
172
176
  ```tsx
173
177
  // App.tsx
174
- import { Button } from '@tqc-solution/design-system';
178
+ import { Button } from "@tqc-solution/design-system";
175
179
 
176
180
  function App() {
177
181
  return (
178
182
  <div className="bg-background-fill-primary p-24">
179
- <h1 className="text-heading-2xl text-text-brand">
180
- Hello Tailwind!
181
- </h1>
183
+ <h1 className="text-heading-2xl text-text-brand">Hello Tailwind!</h1>
182
184
 
183
185
  <button className="bg-background-fill-brand text-text-inverse px-24 py-12 rounded-8 shadow-shadow-md">
184
186
  Native HTML button with DS tokens
package/dist/css/{pubfuture.css → pubstar.css} RENAMED
@@ -1,21 +1,21 @@
1
1
 
2
- :root[data-theme="pubfuture"],
3
- :root.pubfuture,
2
+ :root[data-theme="pubstar"],
3
+ :root.pubstar,
4
4
  :root {
5
5
  --background-bg-overlay: rgba(0, 0, 0, 0.30000001192092896);
6
6
  --background-bg-primary: #FFFFFF;
7
7
  --background-bg-secondary: #EEEEEE;
8
8
  --background-bg-tertiary: #EAEEF0;
9
9
  --background-fill-alert: #FEF5E7;
10
- --background-fill-black-opacity-30: rgba(0, 0, 0, 0.30000001192092896);
11
- --background-fill-brand: #3FAE3B;
12
- --background-fill-brand-accent: #2FAFF8;
13
- --background-fill-brand-accent-moderate: #B1E1FD;
14
- --background-fill-brand-accent-strong: #2980B9;
15
- --background-fill-brand-accent-subtle: #E6F6FE;
16
- --background-fill-brand-moderate: #C6F0C5;
17
- --background-fill-brand-strong: #328B2F;
18
- --background-fill-brand-subtle: #E3F7E3;
10
+ --background-fill-black-opacity-50: rgba(0, 0, 0, 0.5);
11
+ --background-fill-brand: #2FAFF8;
12
+ --background-fill-brand-accent: #3FAE3B;
13
+ --background-fill-brand-accent-moderate: #C6F0C5;
14
+ --background-fill-brand-accent-strong: #09691B;
15
+ --background-fill-brand-accent-subtle: #E3F7E3;
16
+ --background-fill-brand-moderate: #B1E1FD;
17
+ --background-fill-brand-strong: #2980B9;
18
+ --background-fill-brand-subtle: #E6F6FE;
19
19
  --background-fill-disabled: #F4F4F4;
20
20
  --background-fill-infor: #093651;
21
21
  --background-fill-infor-subtle: #F2F5F6;
@@ -23,8 +23,8 @@
23
23
  --background-fill-negative-moderate: #F8C6BA;
24
24
  --background-fill-negative-strong: #CD3712;
25
25
  --background-fill-negative-subtle: #FCECE8;
26
- --background-fill-positive: #2FAFF8;
27
- --background-fill-positive-subtle: #E6F6FE;
26
+ --background-fill-positive: #3FAE3B;
27
+ --background-fill-positive-subtle: #E3F7E3;
28
28
  --background-fill-primary: #FFFFFF;
29
29
  --background-fill-primary-moderate: #EEEEEE;
30
30
  --background-fill-primary-subtle: #CCCCCC;
@@ -91,18 +91,17 @@
91
91
  --heading-xs-font-size: 14px;
92
92
  --heading-xs-line-height: 20px;
93
93
  --heading-xs-weight: bold ;
94
- --border-brand: #3FAE3B;
95
- --icon-brand: #3FAE3B;
96
- --icon-brand-strong: #328B2F;
94
+ --icon-brand: #2FAFF8;
95
+ --icon-brand-strong: #2980B9;
97
96
  --icon-disabled: #CCCCCC;
98
97
  --icon-infor: #47687D;
99
98
  --icon-Infor-subtle: #F2F5F6;
100
99
  --icon-inverse: #FFFFFF;
101
100
  --icon-negative: #E84118;
102
101
  --icon-negative-subtle: #FCECE8;
103
- --icon-positive: #2FAFF8;
104
- --icon-positive-moderate: #B1E1FD;
105
- --icon-positive-strong: #2980B9;
102
+ --icon-positive: #3FAE3B;
103
+ --icon-positive-moderate: #3FAE3B;
104
+ --icon-positive-strong: #09691B;
106
105
  --icon-primary: #000000;
107
106
  --icon-secondary: #777777;
108
107
  --icon-tertiary: #093651;
@@ -116,16 +115,16 @@
116
115
  --radius-6: 6px;
117
116
  --radius-8: 8px;
118
117
  --radius-full: 9999px;
119
- --shadow-shadow-2xl: 1px 24px 48px -14px rgba(10, 13, 18, 0.18);
120
- --shadow-shadow-3xl: 4px 4px 20px 4px rgba(0, 0, 0, 0.15);
121
- --shadow-shadow-lg: 0px 4px 6px -2px rgba(10, 13, 18, 0.03), 2px 4px 16px 0px rgba(10, 13, 18, 0.1);
122
- --shadow-shadow-md: -1px 1px 6px 0px rgba(0, 0, 0, 0.15);
123
- --shadow-shadow-sm: 0px 1px 2px 0px rgba(10, 13, 18, 0.06), 0px 1px 3px 0px rgba(10, 13, 18, 0.1);
124
- --shadow-shadow-sm-destructive: 0px 0px 0px 4px #fcece8, 0px 1px 2px 0px rgba(9, 105, 27, 0.05);
125
- --shadow-shadow-sm-neutral: 0px 0px 0px 4px #eeeeee, 0px 1px 2px 0px rgba(9, 105, 27, 0.05);
126
- --shadow-shadow-sm-primary: 0px 0px 0px 4px #e3f7e3, 0px 1px 2px 0px rgba(9, 105, 27, 0.05);
127
- --shadow-shadow-sm-secondary: 0px 0px 0px 4px #e6f6fe, 0px 1px 2px 0px rgba(9, 105, 27, 0.05);
128
- --shadow-shadow-xl: 0px 8px 8px -4px rgba(10, 13, 18, 0.03), 5px 13px 17px 7px rgba(10, 13, 18, 0.08);
118
+ --shadow-shadow-2xl: box-shadow: 1px 24px 48px -14px rgba(10, 13, 18, 0.18);
119
+ --shadow-shadow-3xl: box-shadow: 4px 4px 20px 4px rgba(0, 0, 0, 0.15);
120
+ --shadow-shadow-lg: box-shadow: 0px 4px 6px -2px rgba(10, 13, 18, 0.03), 2px 4px 16px 0px rgba(10, 13, 18, 0.1);
121
+ --shadow-shadow-md: box-shadow: -1px 1px 6px 0px rgba(0, 0, 0, 0.15);
122
+ --shadow-shadow-sm: box-shadow: 0px 1px 2px 0px rgba(10, 13, 18, 0.06), 0px 1px 3px 0px rgba(10, 13, 18, 0.1);
123
+ --shadow-shadow-sm-destructive: box-shadow: 0px 0px 0px 4px #fcece8, 0px 1px 2px 0px rgba(9, 105, 27, 0.05);
124
+ --shadow-shadow-sm-neutral: box-shadow: 0px 0px 0px 4px #eeeeee, 0px 1px 2px 0px rgba(9, 105, 27, 0.05);
125
+ --shadow-shadow-sm-primary: box-shadow: 0px 0px 0px 4px #e3f7e3;
126
+ --shadow-shadow-sm-secondary: box-shadow: 0px 0px 0px 4px #e6f6fe;
127
+ --shadow-shadow-xl: box-shadow: 0px 8px 8px -4px rgba(10, 13, 18, 0.03), 5px 13px 17px 7px rgba(10, 13, 18, 0.08);
129
128
  --spacing--8: -8px;
130
129
  --spacing-0: 0px;
131
130
  --spacing-12: 12px;
@@ -149,13 +148,13 @@
149
148
  --spacing-8: 8px;
150
149
  --spacing-80: 80px;
151
150
  --spacing-full: 9999px;
152
- --stroke-brand: #3FAE3B;
153
- --stroke-brand-strong: #328B2F;
154
- --stroke-brand-subtle: #E3F7E3;
151
+ --stroke-brand: #2FAFF8;
152
+ --stroke-brand-strong: #2980B9;
153
+ --stroke-brand-subtle: #E6F6FE;
155
154
  --stroke-disable: #F4F4F4;
156
155
  --stroke-inverse: #000000;
157
156
  --stroke-negative: #E84118;
158
- --stroke-positive: #2FAFF8;
157
+ --stroke-positive: #3FAE3B;
159
158
  --stroke-primary: #CCCCCC;
160
159
  --stroke-secondary: #EEEEEE;
161
160
  --stroke-Stroke-0-5: 0.5px;
@@ -165,16 +164,16 @@
165
164
  --stroke-Stroke-4: 4px;
166
165
  --stroke-tertiary: #47687D;
167
166
  --stroke-warning: #F39C12;
168
- --text-brand: #3FAE3B;
169
- --text-brand-strong: #328B2F;
170
- --text-brand-subtle: #E3F7E3;
167
+ --text-brand: #2FAFF8;
168
+ --text-brand-strong: #2980B9;
169
+ --text-brand-subtle: #E6F6FE;
171
170
  --text-disabled: #CCCCCC;
172
171
  --text-inverse: #FFFFFF;
173
172
  --text-inverse-moderate: #F9F9F9;
174
173
  --text-nagative-moderate: #F18D74;
175
174
  --text-negative: #E84118;
176
- --text-positive: #2FAFF8;
177
- --text-positive-moderate: #63C3FA;
175
+ --text-positive: #3FAE3B;
176
+ --text-positive-moderate: #C6F0C5;
178
177
  --text-primary: #000000;
179
178
  --text-secondary: #777777;
180
179
  --text-tertiary: #093651;