coles-solid-library 0.0.8 → 0.0.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/package.json +2 -2
  2. package/themes/_variables.scss +41 -0
  3. package/themes/themes.scss +108 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "coles-solid-library",
3
- "version": "0.0.8",
3
+ "version": "0.0.9",
4
4
  "description": "",
5
5
  "module": "dist/index.esm.js",
6
6
  "types": "dist/index.d.ts",
@@ -10,7 +10,7 @@
10
10
  "dist/index.d.ts",
11
11
  "dist/tools.d.ts",
12
12
  "dist/components",
13
- "theme"
13
+ "themes"
14
14
  ],
15
15
  "scripts": {
16
16
  "build": "rollup -c --bundleConfigAsCjs"
package/themes/_variables.scss ADDED
@@ -0,0 +1,41 @@
1
+ // ------------- Theme Variables -------------
2
+ $mobile: 768px;
3
+
4
+ // ------ Typography
5
+ $spacing-unit: 8px;
6
+
7
+ // Derived spacing values:
8
+ $spacing-1: $spacing-unit;
9
+ $spacing-2: $spacing-unit * 2;
10
+ $spacing-3: $spacing-unit * 3;
11
+ $spacing-4: $spacing-unit * 4;
12
+
13
+ // Border radius
14
+ $border-radius-sm: 4px;
15
+ $border-radius-md: 8px;
16
+ $border-radius-lg: 16px;
17
+
18
+ // Shadows
19
+ $shadow-elevation-1: 0px 1px 3px rgba(0, 0, 0, 0.15);
20
+ $shadow-elevation-2: 0px 3px 6px rgba(0, 0, 0, 0.30);
21
+ $shadow-elevation-3: 0px 10px 20px rgba(0, 0, 0, 0.45);
22
+
23
+ // Transitions
24
+ $transition-duration: 0.3s;
25
+ $transition-easing: ease-in-out;
26
+
27
+
28
+ // Define typography scale (e.g., font sizes for headings and body)
29
+ $font-family: 'Roboto, sans-serif';
30
+ $font-size-base: 16px;
31
+ $font-size-h1: 96px;
32
+ $font-size-h2: 60px;
33
+ $font-size-h3: 48px;
34
+ $font-size-h4: 34px;
35
+ $font-size-h5: 24px;
36
+ $font-size-h6: 20px;
37
+ $font-weight-light: 300;
38
+ $font-weight-regular: 400;
39
+ $font-weight-medium: 500;
40
+ $line-height: 1.5;
41
+ $letter-spacing: normal;
package/themes/themes.scss ADDED
@@ -0,0 +1,108 @@
1
+ @use 'variables' as *;
2
+
3
+ $hoverPercent: 5%;
4
+ $activePercent: 10%;
5
+ $focusPercent: 15%;
6
+
7
+ [data-theme="dark"] {
8
+ --primary-color: #282828;
9
+ --primary-color-hover: darken(#282828, $hoverPercent);
10
+ --primary-color-active: darken(#282828, $activePercent);
11
+ --primary-color-focus: darken(#282828, $focusPercent);
12
+ --on-primary-color: #ffffff;
13
+ --primary-color-dark: #262626;
14
+
15
+ --secondary-color: #323232;
16
+ --secondary-color-hover: darken(#323232, $hoverPercent);
17
+ --secondary-color-active: darken(#323232, $activePercent);
18
+ --secondary-color-focus: darken(#323232, $focusPercent);
19
+ --on-secondary-color: #ffffff;
20
+ --secondary-color-dark: #303030;
21
+
22
+ --tertiary-color: #757575;
23
+ --tertiary-color-hover: darken(#757575, $hoverPercent);
24
+ --tertiary-color-active: darken(#757575, $activePercent);
25
+ --tertiary-color-focus: darken(#757575, $focusPercent);
26
+ --on-tertiary-color: #000000;
27
+ --tertiary-color-dark: #666666;
28
+
29
+ --warn-color: #b00020;
30
+ --on-warn-color: #000000;
31
+
32
+ --background-color: #121212;
33
+ --on-background-color: #ffffff;
34
+
35
+ --surface-color: #f5f5f5;
36
+ --on-surface-color: #000000;
37
+ }
38
+
39
+ [data-theme="light"] {
40
+ --primary-color: #3F51B5;
41
+ --primary-color-hover: darken(#3F51B5, $hoverPercent);
42
+ --primary-color-active: darken(#3F51B5, $activePercent);
43
+ --primary-color-focus: darken(#3F51B5, $focusPercent);
44
+ --on-primary-color: #ffffff;
45
+ --primary-color-dark: #303F9F;
46
+
47
+ --secondary-color: #5C6BC0;
48
+ --secondary-color-hover: darken(#5C6BC0, $hoverPercent);
49
+ --secondary-color-active: darken(#5C6BC0, $activePercent);
50
+ --secondary-color-focus: darken(#5C6BC0, $focusPercent);
51
+ --on-secondary-color: #ffffff;
52
+ --secondary-color-dark: #3949AB;
53
+
54
+ --tertiary-color: #009688;
55
+ --tertiary-color-hover: darken(#009688, $hoverPercent);
56
+ --tertiary-color-active: darken(#009688, $activePercent);
57
+ --tertiary-color-focus: darken(#009688, $focusPercent);
58
+ --on-tertiary-color: #000000;
59
+ --tertiary-color-dark: #018786;
60
+
61
+ --warn-color: #b00020;
62
+ --on-warn-color: #ffffff;
63
+
64
+ --background-color: #ffffff;
65
+ --on-background-color: #000000;
66
+
67
+ --surface-color: #f5f5f5;
68
+ --on-surface-color: #000000;
69
+ }
70
+ :root {
71
+ --spacing-1: #{$spacing-1};
72
+ --spacing-2: #{$spacing-2};
73
+ --spacing-3: #{$spacing-3};
74
+ --spacing-4: #{$spacing-4};
75
+
76
+ --border-radius-sm: #{$border-radius-sm};
77
+ --border-radius-md: #{$border-radius-md};
78
+ --border-radius-lg: #{$border-radius-lg};
79
+
80
+ --shadow-elevation-1: #{$shadow-elevation-1};
81
+ --shadow-elevation-2: #{$shadow-elevation-2};
82
+ --shadow-elevation-3: #{$shadow-elevation-3};
83
+
84
+ --transition-duration: #{$transition-duration};
85
+ --transition-easing: #{$transition-easing};
86
+
87
+ --font-family: #{$font-family};
88
+ --font-size-base: #{$font-size-base};
89
+ --font-size-h1: #{$font-size-h1};
90
+ --font-size-h2: #{$font-size-h2};
91
+ --font-size-h3: #{$font-size-h3};
92
+ --font-size-h4: #{$font-size-h4};
93
+ --font-size-h5: #{$font-size-h5};
94
+ --font-size-h6: #{$font-size-h6};
95
+ --font-weight-light: {$font-weight-light};
96
+ --font-weight-regular: {$font-weight-regular};
97
+ --font-weight-medium: #{$font-weight-medium};
98
+ --line-height: #{$line-height};
99
+ --letter-spacing: #{$letter-spacing};
100
+ }
101
+ body {
102
+ font-family: var(--font-family);
103
+ font-size: var(--font-size-base);
104
+ line-height: var(--line-height);
105
+ letter-spacing: var(--letter-spacing);
106
+ color: var(--on-background-color);
107
+ background-color: var(--background-color);
108
+ }