volto/packages/cmsui/styles/cmsui.css at d2cf468880230a5aa593b7719052ecbd07185a30 · plone/volto · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
@plugin 'tailwindcss-react-aria-components';
@plugin 'tailwindcss-animate';

@source '../node_modules/@plone/components/dist/quanta';

@import 'tailwindcss/theme.css' layer(theme);
@import 'tailwindcss/preflight.css' layer(base);
@import 'tailwindcss/utilities.css' layer(utilities);

@custom-variant dark (&:where(.dark, .dark *));

@layer cmsui {
  @import '@plone/components/src/styles/basic/theme.css';

  body.cmsui {
    --background: hsl(0 0% 100%);
    --foreground: hsl(222.2 84% 4.9%);
    --card: hsl(0 0% 100%);
    --card-foreground: hsl(222.2 84% 4.9%);
    --popover: hsl(0 0% 100%);
    --popover-foreground: hsl(222.2 84% 4.9%);
    --primary: hsl(222.2 47.4% 11.2%);
    --primary-foreground: hsl(210 40% 98%);
    --secondary: hsl(210 40% 96.1%);
    --secondary-foreground: hsl(222.2 47.4% 11.2%);
    --muted: hsl(210 40% 96.1%);
    --muted-foreground: hsl(215.4 16.3% 46.9%);
    --accent: hsl(210 40% 96.1%);
    --accent-foreground: hsl(222.2 47.4% 11.2%);
    --destructive: hsl(0 84.2% 60.2%);
    --destructive-foreground: hsl(210 40% 98%);
    --border: hsl(214.3 31.8% 91.4%);
    --input: hsl(214.3 31.8% 91.4%);
    --ring: hsl(222.2 84% 4.9%);
    --chart-1: hsl(12 76% 61%);
    --chart-2: hsl(173 58% 39%);
    --chart-3: hsl(197 37% 24%);
    --chart-4: hsl(43 74% 66%);
    --chart-5: hsl(27 87% 67%);
    /* Removed custom radius from shadcn */
    /* --radius: 0.6rem; */
  }

  body.cmsui.dark {
    --background: hsl(222.2 84% 4.9%);
    --foreground: hsl(210 40% 98%);
    --card: hsl(222.2 84% 4.9%);
    --card-foreground: hsl(210 40% 98%);
    --popover: hsl(222.2 84% 4.9%);
    --popover-foreground: hsl(210 40% 98%);
    --primary: hsl(210 40% 98%);
    --primary-foreground: hsl(222.2 47.4% 11.2%);
    --secondary: hsl(217.2 32.6% 17.5%);
    --secondary-foreground: hsl(210 40% 98%);
    --muted: hsl(217.2 32.6% 17.5%);
    --muted-foreground: hsl(215 20.2% 65.1%);
    --accent: hsl(217.2 32.6% 17.5%);
    --accent-foreground: hsl(210 40% 98%);
    --destructive: hsl(0 62.8% 30.6%);
    --destructive-foreground: hsl(210 40% 98%);
    --border: hsl(217.2 32.6% 17.5%);
    --input: hsl(217.2 32.6% 17.5%);
    --ring: hsl(212.7 26.8% 83.9%);
    --chart-1: hsl(220 70% 50%);
    --chart-2: hsl(160 60% 45%);
    --chart-3: hsl(30 80% 55%);
    --chart-4: hsl(280 65% 60%);
    --chart-5: hsl(340 75% 55%);
  }

  @theme {
    --layout-container-width: 1440px;
    --default-container-width: 940px;
    --narrow-container-width: 620px;

    --plone-toolbar-width: 80px;

    --color-quanta-air: #fff;
    --color-quanta-space: #000;
    --color-quanta-denim: #021322;

    --color-quanta-snow: #f3f5f7;
    --color-quanta-smoke: #e4e8ec;
    --color-quanta-silver: #c3cdd5;
    --color-quanta-dolphin: #8296a6;
    --color-quanta-pigeon: #617789;
    --color-quanta-iron: #4a5b68;

    --color-quanta-arctic: #e2f1fd;
    --color-quanta-sky: #c5e3fc;
    --color-quanta-azure: #7cc0f8;
    --color-quanta-cobalt: #2597f4;
    --color-quanta-sapphire: #0b78d0;
    --color-quanta-royal: #085696;

    --color-quanta-ballet: #fee9e7;
    --color-quanta-flamingo: #fcd0ca;
    --color-quanta-poppy: #f9a094;
    --color-quanta-rose: #f54e38;
    --color-quanta-candy: #d0220b;
    --color-quanta-wine: #a91c09;

    --color-quanta-cream: #fcf3cf;
    --color-quanta-banana: #faeaad;
    --color-quanta-lemmon: #f6d355;
    --color-quanta-gold: #b48f09;
    --color-quanta-dijon: #917308;
    --color-quanta-bronze: #6b5506;

    --color-quanta-daiquiri: #e2f7de;
    --color-quanta-mint: #c5efbe;
    --color-quanta-celery: #8bde7c;
    --color-quanta-neon: #3da72a;
    --color-quanta-emerald: #318722;
    --color-quanta-turtle: #256619;

    --color-quanta-aqua: #d6f5f2;
    --color-quanta-spa: #baeee9;
    --color-quanta-tiffany: #74dcd4;
    --color-quanta-turquoise: #29a399;
    --color-quanta-peacock: #207e77;
    --color-quanta-puya: #175e58;
  }

  @theme inline {
    --color-brand: var(--color-quanta-sapphire);
    --color-background: var(--background);
    --color-foreground: var(--foreground);
    --color-card: var(--card);
    --color-card-foreground: var(--card-foreground);
    --color-popover: var(--popover);
    --color-popover-foreground: var(--popover-foreground);
    --color-primary: var(--primary);
    --color-primary-foreground: var(--primary-foreground);
    --color-secondary: var(--secondary);
    --color-secondary-foreground: var(--secondary-foreground);
    --color-muted: var(--muted);
    --color-muted-foreground: var(--muted-foreground);
    --color-accent: var(--accent);
    --color-accent-foreground: var(--accent-foreground);
    --color-destructive: var(--destructive);
    --color-destructive-foreground: var(--destructive-foreground);
    --color-border: var(--border);
    --color-input: var(--input);
    --color-ring: var(--ring);
    --color-chart-1: var(--chart-1);
    --color-chart-2: var(--chart-2);
    --color-chart-3: var(--chart-3);
    --color-chart-4: var(--chart-4);
    --color-chart-5: var(--chart-5);

    --quanta-icon-size: var(--spacing);

    /* Removed custom radius from shadcn */
    /* --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px); */
  }
}

@import './utilities.css';